@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  --mc-bg: #10100d;
  --mc-panel: #181814;
  --mc-panel-2: #211f19;
  --mc-panel-3: #29261e;
  --mc-border: #3f3a2e;

  --mc-text: #f5f1df;
  --mc-muted: #aaa58f;

  --mc-green: #55d63f;
  --mc-green-dark: #3b9d2b;

  --mc-purple: #a66bff;
  --mc-purple-dark: #7040b8;

  --mc-yellow: #ffd84a;
  --mc-red: #ff5757;
  --mc-blue: #63b8ff;

  --pixel-shadow:
    0 4px 0 rgba(0,0,0,.7),
    0 8px 20px rgba(0,0,0,.35);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  color: var(--mc-text);

  font-family: Inter, Arial, sans-serif;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(166,107,255,.16),
      transparent 35%
    ),
    linear-gradient(
      rgba(255,255,255,.015) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.015) 1px,
      transparent 1px
    ),
    var(--mc-bg);

  background-size:
    auto,
    32px 32px,
    32px 32px,
    auto;

  overflow-x: hidden;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;

  background:
    linear-gradient(
      rgba(0,0,0,.12),
      rgba(0,0,0,.12)
    );

  z-index: 999;
  mix-blend-mode: multiply;
}

/* =========================================================
   PIXEL SKY
========================================================= */

.pixel-sky {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -5;

  background:
    radial-gradient(
      circle at 18% 20%,
      rgba(118,82,255,.16),
      transparent 18%
    ),
    radial-gradient(
      circle at 82% 28%,
      rgba(60,160,255,.10),
      transparent 20%
    ),
    linear-gradient(
      180deg,
      rgba(24,21,45,.55),
      transparent 52%
    );
}

.pixel-stars {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -4;
  opacity: .35;

  background-image:
    radial-gradient(circle, #ffffff 1px, transparent 1px),
    radial-gradient(circle, #ffffff 1px, transparent 1px);

  background-size:
    80px 80px,
    130px 130px;

  background-position:
    10px 20px,
    55px 70px;
}

/* =========================================================
   NAVBAR
========================================================= */

.mc-navbar {
  position: sticky;
  top: 0;
  z-index: 100;

  min-height: 74px;
  padding: 12px 5%;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;

  background:
    linear-gradient(
      rgba(18,17,13,.94),
      rgba(12,12,9,.94)
    );

  border-bottom: 3px solid #332f25;

  box-shadow:
    0 5px 0 rgba(0,0,0,.42),
    0 12px 28px rgba(0,0,0,.28);

  backdrop-filter: blur(10px);
}

.mc-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;

  color: #fff;
  text-decoration: none;
}

.mc-brand-block {
  width: 40px;
  height: 40px;

  display: grid;
  place-items: center;

  background:
    linear-gradient(135deg, #9d72ff, #6337ae);

  border: 3px solid #c7abff;

  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,.28),
    var(--pixel-shadow);

  font-size: 20px;
}

.mc-brand-text {
  font-family: "Press Start 2P", monospace;
  font-size: 16px;
  letter-spacing: -1px;
  text-shadow:
    3px 3px 0 #000;
}

.mc-brand-text span {
  color: var(--mc-purple);
}

.mc-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mc-nav a {
  padding: 10px 12px;

  color: #bbb7a7;
  text-decoration: none;

  font-family: "Press Start 2P", monospace;
  font-size: 9px;

  border: 2px solid transparent;

  transition:
    transform .15s ease,
    color .15s ease,
    background .15s ease,
    border-color .15s ease;
}

.mc-nav a:hover,
.mc-nav a.active {
  color: #fff;

  background: rgba(166,107,255,.10);

  border-color: #5d477e;

  transform: translateY(-1px);
}

.mc-inventory-btn {
  min-width: 108px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 11px 13px;

  color: #17150f;
  text-decoration: none;

  background: linear-gradient(
    #70e958,
    #3d9e2c
  );

  border: 3px solid #1d4e17;

  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.35),
    inset 0 -3px 0 rgba(0,0,0,.18),
    var(--pixel-shadow);

  font-family: "Press Start 2P", monospace;
  font-size: 8px;
  font-weight: 900;

  transition: .15s ease;
}

.mc-inventory-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

/* =========================================================
   HERO
========================================================= */

.mc-hero {
  position: relative;

  min-height: 710px;

  display: flex;
  align-items: center;

  overflow: hidden;

  border-bottom: 4px solid #302c22;

  background:
    linear-gradient(
      180deg,
      rgba(27,25,42,.72),
      rgba(13,12,10,.94)
    );
}

.mc-hero::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      180deg,
      transparent 58%,
      rgba(10,9,6,.95)
    );

  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;

  width: min(1100px, 100%);
  margin: 0 auto;

  padding: 100px 26px 80px;
}

.mc-achievement {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 9px 13px;

  background:
    linear-gradient(
      #30302a,
      #191913
    );

  border: 3px solid #4a4535;

  box-shadow: var(--pixel-shadow);

  font-family: "Press Start 2P", monospace;
  font-size: 8px;

  letter-spacing: .4px;
}

.achievement-icon {
  color: var(--mc-yellow);
  font-size: 14px;
  text-shadow: 2px 2px 0 #000;
}

.mc-hero h1 {
  max-width: 920px;

  margin-top: 26px;

  font-family: "Press Start 2P", monospace;

  font-size: clamp(35px, 7vw, 76px);

  line-height: 1.25;

  letter-spacing: -3px;

  color: #fff;

  text-shadow:
    5px 5px 0 #111,
    10px 10px 0 rgba(0,0,0,.25);
}

.mc-hero h1 span {
  display: block;

  margin-top: 7px;

  color: var(--mc-purple);

  text-shadow:
    5px 5px 0 #2b1a42,
    0 0 35px rgba(166,107,255,.25);
}

.hero-description {
  max-width: 650px;

  margin-top: 28px;

  color: #c0bcac;

  font-size: 16px;
  line-height: 1.8;
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;

  margin-top: 32px;
}

.mc-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;

  min-height: 52px;

  padding: 14px 18px;

  border: 3px solid #2d291f;

  font-family: "Press Start 2P", monospace;
  font-size: 9px;

  text-decoration: none;

  cursor: pointer;

  box-shadow: var(--pixel-shadow);

  transition:
    transform .12s ease,
    filter .12s ease;
}

.mc-button:hover {
  transform: translateY(-3px);
  filter: brightness(1.08);
}

.mc-button:active {
  transform: translateY(1px);
}

.mc-button-primary {
  color: #17150f;

  background:
    linear-gradient(
      #76ea5d,
      #419e2f
    );

  border-color: #24581c;

  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.35),
    inset 0 -3px 0 rgba(0,0,0,.2),
    var(--pixel-shadow);
}

.mc-button-secondary {
  color: white;

  background:
    linear-gradient(
      #49443a,
      #29261f
    );

  border-color: #575044;
}

.mc-button-disabled {
  cursor: default;

  color: #827d6e;

  background:
    linear-gradient(
      #3b392f,
      #25231e
    );

  border-color: #4b473b;
}

/* =========================================================
   HERO FLOATERS
========================================================= */

.hero-floating-item {
  position: absolute;

  font-family: "Press Start 2P", monospace;

  filter:
    drop-shadow(4px 4px 0 rgba(0,0,0,.45))
    drop-shadow(0 0 16px rgba(255,255,255,.12));

  animation: floatItem 4s ease-in-out infinite;
}

.item-diamond {
  right: 12%;
  top: 24%;
  color: #66ecff;
  font-size: 44px;
}

.item-emerald {
  right: 20%;
  top: 63%;
  color: #63ff82;
  font-size: 32px;
  animation-delay: -1.2s;
}

.item-gold {
  right: 8%;
  top: 52%;
  color: #ffd84a;
  font-size: 28px;
  animation-delay: -2.1s;
}

@keyframes floatItem {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-12px);
  }
}

/* =========================================================
   STATS
========================================================= */

.minecraft-stats {
  max-width: 760px;

  display: flex;
  align-items: center;
  gap: 24px;

  margin-top: 60px;
  padding-top: 26px;

  border-top: 3px solid rgba(255,255,255,.06);
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 11px;
}

.stat-icon {
  font-size: 22px;

  filter:
    drop-shadow(3px 3px 0 rgba(0,0,0,.7));
}

.stat-item strong,
.stat-item small {
  display: block;
}

.stat-item strong {
  font-family: "Press Start 2P", monospace;
  font-size: 14px;
}

.stat-item small {
  margin-top: 6px;
  color: #888272;
  font-size: 9px;
  font-weight: 800;
}

.stat-divider {
  width: 3px;
  height: 38px;
  background: #343126;
}

/* =========================================================
   ANNOUNCEMENT
========================================================= */

.minecraft-announcement {
  width: min(1000px, calc(100% - 32px));

  margin: -34px auto 0;

  position: relative;
  z-index: 5;

  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 15px;

  padding: 18px;

  background:
    linear-gradient(
      #332f27,
      #201e18
    );

  border: 3px solid #514a3c;

  box-shadow: var(--pixel-shadow);
}

.announcement-icon {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  background: var(--mc-yellow);

  color: #27200e;

  border: 3px solid #7c681d;

  font-family: "Press Start 2P", monospace;
  font-size: 17px;
}

.minecraft-announcement strong,
.minecraft-announcement span {
  display: block;
}

.minecraft-announcement strong {
  font-family: "Press Start 2P", monospace;
  font-size: 9px;
}

.minecraft-announcement span {
  margin-top: 6px;
  color: #aaa494;
  font-size: 11px;
  line-height: 1.55;
}

.announcement-xp {
  min-width: 190px;
}

.xp-label {
  margin-bottom: 5px;
  color: #6ee758;

  font-family: "Press Start 2P", monospace;
  font-size: 8px;

  text-align: right;
}

.xp-bar {
  height: 14px;

  padding: 2px;

  background: #15150f;

  border: 2px solid #080805;
}

.xp-fill {
  width: 72%;
  height: 100%;

  background:
    repeating-linear-gradient(
      90deg,
      #65db42 0 12px,
      #52bf35 12px 16px
    );

  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.2);
}

/* =========================================================
   SECTIONS
========================================================= */

.mc-section {
  width: min(1100px, calc(100% - 32px));

  margin: 0 auto;

  padding: 105px 0 60px;
}

.minecraft-section-title {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;

  text-align: center;
}

.title-line {
  height: 3px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #4a4537,
      transparent
    );
}

.section-kicker {
  display: inline-block;

  color: #b69d7d;

  font-family: "Press Start 2P", monospace;
  font-size: 8px;

  letter-spacing: .8px;
}

.minecraft-section-title h2 {
  margin-top: 11px;

  font-family: "Press Start 2P", monospace;

  font-size: clamp(22px, 5vw, 38px);

  letter-spacing: -1px;

  color: #fff;

  text-shadow:
    4px 4px 0 #111;
}

.section-description {
  max-width: 650px;

  margin: 18px auto 38px;

  color: var(--mc-muted);

  text-align: center;

  font-size: 13px;
  line-height: 1.75;
}

/* =========================================================
   RANK CARDS
========================================================= */

.minecraft-rank-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 18px;
}

.minecraft-rank-card {
  position: relative;

  padding: 0;

  background: transparent;
}

.rank-card {
  position: relative;

  min-height: 495px;

  padding: 26px;

  background:
    linear-gradient(
      180deg,
      #27251d,
      #171611
    );

  border: 3px solid #4a4436;

  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.03),
    var(--pixel-shadow);

  overflow: hidden;

  transition:
    transform .18s ease,
    border-color .18s ease;
}

.rank-card:hover {
  transform: translateY(-7px);
  border-color: #75684f;
}

.rank-card.featured {
  border-color: var(--mc-purple);

  box-shadow:
    0 0 0 2px rgba(166,107,255,.14),
    0 0 35px rgba(166,107,255,.11),
    var(--pixel-shadow);
}

.rank-card.featured::before {
  content: "MOST POPULAR";

  position: absolute;
  top: 14px;
  right: -38px;

  width: 145px;

  padding: 7px 0;

  text-align: center;

  transform: rotate(45deg);

  background: var(--mc-purple);
  color: #171017;

  font-family: "Press Start 2P", monospace;
  font-size: 7px;

  border-top: 2px solid #d1b6ff;
  border-bottom: 2px solid #60418f;
}

.rank-glow {
  position: absolute;

  width: 170px;
  height: 170px;

  top: -95px;
  right: -90px;

  border-radius: 0;

  background: var(--mc-purple);

  opacity: .12;

  transform: rotate(45deg);

  filter: blur(35px);
}

.rank-top {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rank-icon {
  width: 68px;
  height: 68px;

  display: grid;
  place-items: center;

  background:
    linear-gradient(
      135deg,
      #3e3a2e,
      #242219
    );

  border: 3px solid #595241;

  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,.3),
    var(--pixel-shadow);

  font-family: "Press Start 2P", monospace;
  font-size: 23px;
}

.rank-label {
  padding: 7px 9px;

  color: #c6a9ff;

  background: rgba(166,107,255,.10);

  border: 2px solid #62448e;

  font-family: "Press Start 2P", monospace;
  font-size: 7px;
}

.rank-card h3 {
  margin-top: 25px;

  font-family: "Press Start 2P", monospace;

  font-size: 20px;

  letter-spacing: -.5px;

  color: white;

  text-shadow:
    3px 3px 0 #000;
}

.rank-price {
  display: flex;
  align-items: baseline;
  gap: 8px;

  margin-top: 12px;
}

.rank-price strong {
  font-family: "Press Start 2P", monospace;

  font-size: 29px;

  color: var(--mc-yellow);

  text-shadow:
    3px 3px 0 #3f3510;
}

.rank-price span {
  color: #878171;
  font-size: 10px;
  font-weight: 700;
}

.rank-description {
  min-height: 60px;

  margin-top: 16px;

  color: #a49f90;

  font-size: 12px;
  line-height: 1.65;
}

.perks {
  display: flex;
  flex-direction: column;
  gap: 10px;

  margin-top: 18px;
  padding-top: 18px;

  border-top: 2px solid #302d23;
}

.perk {
  display: flex;
  align-items: center;
  gap: 10px;

  color: #dad6c8;

  font-size: 11px;
  line-height: 1.4;
}

.perk::before {
  content: "✓";

  width: 19px;
  height: 19px;

  flex: 0 0 auto;

  display: grid;
  place-items: center;

  background: #4ca934;

  color: #081006;

  border: 2px solid #27631d;

  font-size: 9px;
  font-weight: 900;
}

.buy-button {
  width: 100%;

  margin-top: 23px;

  min-height: 50px;

  color: white;

  background:
    linear-gradient(
      #3f3b31,
      #24221c
    );

  border: 3px solid #5d5647;

  box-shadow: var(--pixel-shadow);

  font-family: "Press Start 2P", monospace;
  font-size: 8px;

  cursor: pointer;

  transition: .14s ease;
}

.buy-button:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
}

.rank-card.featured .buy-button {
  color: #19120f;

  background:
    linear-gradient(
      #ad7eff,
      #7143ba
    );

  border-color: #4d2c82;

  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.3),
    inset 0 -3px 0 rgba(0,0,0,.18),
    var(--pixel-shadow);
}

/* =========================================================
   LOADING
========================================================= */

.minecraft-loading {
  grid-column: 1 / -1;

  min-height: 250px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;

  background:
    linear-gradient(
      #28261f,
      #171611
    );

  border: 3px solid #4b4537;

  box-shadow: var(--pixel-shadow);

  color: #9a9585;

  font-family: "Press Start 2P", monospace;
  font-size: 9px;
}

.loading-pixel {
  width: 30px;
  height: 30px;

  background:
    repeating-linear-gradient(
      45deg,
      #6d46a5 0 5px,
      #9c73e3 5px 10px
    );

  border: 3px solid #3f2b60;

  animation: loadingSpin .8s steps(4) infinite;
}

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

/* =========================================================
   DIVIDER
========================================================= */

.minecraft-divider {
  width: min(900px, calc(100% - 50px));

  margin: 40px auto;

  display: flex;
  align-items: center;
  gap: 18px;

  color: #6a624f;

  font-family: "Press Start 2P", monospace;
  font-size: 12px;
}

.minecraft-divider::before,
.minecraft-divider::after {
  content: "";

  flex: 1;

  height: 3px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #403a2f,
      transparent
    );
}

/* =========================================================
   CATEGORY CARDS
========================================================= */

.minecraft-category-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 18px;
}

.minecraft-category-card {
  display: flex;
  gap: 18px;

  padding: 18px;

  background:
    linear-gradient(
      180deg,
      #28261f,
      #191813
    );

  border: 3px solid #464133;

  box-shadow: var(--pixel-shadow);

  transition: .18s ease;
}

.minecraft-category-card:hover {
  transform: translateY(-5px);
  border-color: #675d48;
}

.item-frame {
  width: 75px;
  height: 75px;

  flex: 0 0 auto;

  padding: 7px;

  background:
    linear-gradient(
      135deg,
      #5f5948,
      #302d24
    );

  border: 3px solid #1a1914;

  box-shadow:
    inset 0 0 0 2px #81765d,
    var(--pixel-shadow);
}

.item-frame-inner {
  width: 100%;
  height: 100%;

  display: grid;
  place-items: center;

  background:
    radial-gradient(
      circle at 45% 35%,
      rgba(166,107,255,.2),
      transparent 42%
    ),
    #171611;

  color: var(--mc-purple);

  font-family: "Press Start 2P", monospace;
  font-size: 20px;

  text-shadow:
    3px 3px 0 #241a32;
}

.category-info {
  min-width: 0;
}

.category-tag {
  display: inline-block;

  padding: 5px 7px;

  color: #aaa28e;

  border: 2px solid #464133;

  font-family: "Press Start 2P", monospace;
  font-size: 6px;
}

.category-info h3 {
  margin-top: 11px;

  font-family: "Press Start 2P", monospace;
  font-size: 13px;

  line-height: 1.5;

  text-shadow:
    2px 2px 0 #000;
}

.category-info p {
  margin-top: 7px;

  color: #969181;

  font-size: 11px;
  line-height: 1.6;
}

.coming-soon {
  display: inline-block;

  margin-top: 11px;

  color: var(--mc-yellow);

  font-family: "Press Start 2P", monospace;
  font-size: 6px;
}

/* =========================================================
   BUNDLE
========================================================= */

.minecraft-bundle {
  display: grid;

  grid-template-columns: .8fr 1.2fr;

  background:
    linear-gradient(
      135deg,
      #27241d,
      #161510
    );

  border: 3px solid #504838;

  box-shadow: var(--pixel-shadow);
}

.bundle-art {
  min-height: 330px;

  display: grid;
  place-items: center;

  background:
    radial-gradient(
      circle at center,
      rgba(166,107,255,.12),
      transparent 40%
    ),
    #13120e;

  border-right: 3px solid #393429;
}

.pixel-chest {
  position: relative;

  width: 160px;
  height: 125px;

  filter:
    drop-shadow(12px 16px 0 rgba(0,0,0,.38));
}

.chest-lid,
.chest-body {
  position: absolute;
  left: 0;
  right: 0;
}

.chest-lid {
  top: 2px;
  height: 52px;

  background:
    linear-gradient(
      #bd782e,
      #82491b
    );

  border: 6px solid #4b2810;
}

.chest-body {
  bottom: 0;
  height: 76px;

  background:
    linear-gradient(
      #b56b28,
      #754018
    );

  border: 6px solid #4b2810;
}

.chest-lock {
  position: absolute;

  left: 50%;
  top: 47%;

  transform: translate(-50%, -50%);

  width: 28px;
  height: 34px;

  display: grid;
  place-items: center;

  background: #e6bd38;

  border: 4px solid #785e17;

  color: #5a460f;

  font-size: 15px;
}

.bundle-content {
  padding: 35px;
}

.bundle-content h3 {
  margin-top: 17px;

  font-family: "Press Start 2P", monospace;
  font-size: clamp(18px, 3vw, 28px);

  line-height: 1.45;

  text-shadow:
    3px 3px 0 #000;
}

.bundle-content p {
  max-width: 600px;

  margin-top: 14px;

  color: #a29c8d;

  font-size: 13px;
  line-height: 1.75;
}

.bundle-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  margin: 20px 0 25px;
}

.bundle-items span {
  padding: 9px 11px;

  color: #d6d0bf;

  background: #242219;

  border: 2px solid #4c4638;

  font-size: 10px;
}

/* =========================================================
   FEATURES
========================================================= */

.minecraft-feature-strip {
  width: min(1100px, calc(100% - 32px));

  margin: 70px auto;

  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  border: 3px solid #474133;

  box-shadow: var(--pixel-shadow);
}

.mc-feature {
  display: flex;
  align-items: center;
  gap: 13px;

  padding: 20px;

  background:
    linear-gradient(
      #27251e,
      #181711
    );
}

.mc-feature + .mc-feature {
  border-left: 3px solid #393429;
}

.feature-slot {
  width: 48px;
  height: 48px;

  flex: 0 0 auto;

  display: grid;
  place-items: center;

  background: #171610;

  border: 3px solid #574e3e;

  box-shadow: inset 0 0 0 2px #2c291f;

  font-size: 18px;
}

.mc-feature strong,
.mc-feature span {
  display: block;
}

.mc-feature strong {
  font-family: "Press Start 2P", monospace;
  font-size: 8px;
}

.mc-feature span {
  margin-top: 5px;

  color: #938c7a;

  font-size: 10px;
}

/* =========================================================
   FOOTER CTA
========================================================= */

.minecraft-footer-cta {
  position: relative;

  margin-top: 40px;

  padding: 110px 24px;

  text-align: center;

  border-top: 4px solid #3a352a;

  background:
    radial-gradient(
      circle at center,
      rgba(166,107,255,.15),
      transparent 36%
    ),
    linear-gradient(
      #19171d,
      #0e0d0d
    );
}

.footer-cta-inner {
  max-width: 900px;
  margin: auto;
}

.minecraft-footer-cta h2 {
  margin-top: 15px;

  font-family: "Press Start 2P", monospace;

  font-size: clamp(25px, 6vw, 58px);

  line-height: 1.35;

  letter-spacing: -2px;

  text-shadow:
    4px 4px 0 #000;
}

.minecraft-footer-cta h2 span {
  color: var(--mc-purple);
}

.minecraft-footer-cta p {
  max-width: 600px;

  margin: 20px auto 28px;

  color: #9d9787;

  font-size: 13px;
  line-height: 1.75;
}

/* =========================================================
   FOOTER
========================================================= */

.mc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;

  padding: 25px 5%;

  background:
    #0d0c09;

  border-top: 3px solid #302c22;

  color: #888273;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-logo > .mc-brand-block {
  width: 34px;
  height: 34px;

  font-size: 14px;
}

.footer-logo strong,
.footer-logo small {
  display: block;
}

.footer-logo strong {
  font-family: "Press Start 2P", monospace;
  font-size: 10px;
  color: white;
}

.footer-logo strong span {
  color: var(--mc-purple);
}

.footer-logo small {
  margin-top: 5px;
  font-size: 8px;
}

.footer-links {
  display: flex;
  gap: 16px;
}

.footer-links a {
  color: #8f887a;
  text-decoration: none;

  font-family: "Press Start 2P", monospace;
  font-size: 7px;
}

.footer-links a:hover {
  color: white;
}

.footer-copy {
  font-size: 9px;
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 900px) {

  .mc-navbar {
    flex-wrap: wrap;
  }

  .mc-nav {
    order: 3;
    width: 100%;
    justify-content: center;
    padding-top: 4px;
  }

  .mc-hero {
    min-height: 630px;
  }

  .hero-floating-item {
    opacity: .55;
  }

  .minecraft-rank-grid,
  .minecraft-category-grid {
    grid-template-columns: 1fr;
  }

  .minecraft-feature-strip {
    grid-template-columns: 1fr;
  }

  .mc-feature + .mc-feature {
    border-left: 0;
    border-top: 3px solid #393429;
  }

  .minecraft-bundle {
    grid-template-columns: 1fr;
  }

  .bundle-art {
    min-height: 250px;
    border-right: 0;
    border-bottom: 3px solid #393429;
  }
}

@media (max-width: 650px) {

  .mc-navbar {
    padding: 10px 14px;
  }

  .mc-brand-text {
    font-size: 11px;
  }

  .mc-brand-block {
    width: 34px;
    height: 34px;
  }

  .mc-nav {
    gap: 3px;
    overflow-x: auto;
    justify-content: flex-start;
  }

  .mc-nav a {
    white-space: nowrap;
    font-size: 7px;
  }

  .mc-inventory-btn {
    min-width: 82px;
    font-size: 7px;
  }

  .hero-content {
    padding: 75px 18px 65px;
  }

  .mc-achievement {
    font-size: 6px;
  }

  .mc-hero h1 {
    font-size: 31px;
    letter-spacing: -1.5px;
  }

  .hero-description {
    font-size: 13px;
  }

  .minecraft-stats {
    flex-wrap: wrap;
    gap: 18px;
  }

  .stat-divider {
    display: none;
  }

  .minecraft-announcement {
    grid-template-columns: auto 1fr;
  }

  .announcement-xp {
    grid-column: 1 / -1;
  }

  .xp-label {
    text-align: left;
  }

  .mc-section {
    padding-top: 80px;
  }

  .minecraft-section-title {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .title-line {
    display: none;
  }

  .minecraft-section-title h2 {
    font-size: 21px;
  }

  .rank-card {
    min-height: auto;
  }

  .minecraft-category-card {
    align-items: flex-start;
  }

  .bundle-content {
    padding: 25px 20px;
  }

  .minecraft-footer-cta {
    padding: 80px 20px;
  }

  .mc-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-links {
    flex-wrap: wrap;
  }
}

/* =========================================================
   ZYNOX WORLD HUB
   Servers + Memories
========================================================= */

.mc-server-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 32px;
}

.mc-server-card {
  position: relative;
  padding: 26px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(48,45,35,.96), rgba(20,19,15,.98)),
    url("/assets/ui/Outline/green.png");
  background-size: auto, 100% 100%;
  background-repeat: no-repeat;
  border: 3px solid #514b3d;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.035),
    0 8px 0 #0b0b09,
    0 18px 35px rgba(0,0,0,.28);
}

.mc-server-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255,255,255,.035), transparent 35%),
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 7px,
      rgba(255,255,255,.012) 8px
    );
}

.server-enhanced {
  border-color: #7657a7;
  background:
    linear-gradient(180deg, rgba(53,43,65,.97), rgba(20,18,24,.99)),
    url("/assets/ui/Outline/blue.png");
  background-size: auto, 100% 100%;
}

.server-card-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
}

.server-badge {
  display: inline-block;
  padding: 7px 9px;
  color: #14120c;
  background: #8bd76d;
  border: 2px solid #315d26;
  font-family: "Press Start 2P", monospace;
  font-size: 7px;
}

.server-enhanced .server-badge {
  background: #b287ed;
  border-color: #5e4384;
}

.mc-server-card h3 {
  margin-top: 14px;
  font-family: "Press Start 2P", monospace;
  font-size: clamp(17px, 2vw, 25px);
  color: #fff;
  text-shadow: 3px 3px 0 #000;
}

.server-status-dot {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  margin-top: 5px;
  background: #65dc52;
  border: 3px solid #1f4c18;
  box-shadow: 0 0 0 3px rgba(101,220,82,.10);
}

.server-type {
  position: relative;
  z-index: 1;
  margin-top: 13px;
  color: #8d8878;
  font-family: "Press Start 2P", monospace;
  font-size: 7px;
  letter-spacing: .5px;
}

.server-connect {
  position: relative;
  z-index: 1;
  margin-top: 24px;
  padding: 4px;
  background: #11100d;
  border: 2px solid #3d382e;
}

.server-connect-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 12px;
  border-bottom: 2px solid #28251f;
}

.server-connect-row:last-child {
  border-bottom: 0;
}

.server-connect-row span {
  color: #777164;
  font-family: "Press Start 2P", monospace;
  font-size: 7px;
}

.server-connect-row strong {
  color: #eee9dc;
  font-family: "Press Start 2P", monospace;
  font-size: 8px;
  text-align: right;
  word-break: break-all;
}

.mc-server-copy {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-top: 17px;
}

.mc-memory-empty {
  display: grid;
  grid-template-columns: 190px 1fr;
  align-items: center;
  gap: 28px;
  padding: 28px;
  margin-top: 32px;
  background:
    linear-gradient(180deg, #28261f, #15140f);
  border: 3px solid #4b4639;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.03),
    0 8px 0 #0a0a08;
}

.memory-frame {
  padding: 10px;
  background: #151410;
  border: 4px solid #6b604a;
  box-shadow:
    inset 0 0 0 3px #322e25,
    0 6px 0 #0a0a08;
}

.memory-frame-inner {
  min-height: 150px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, #42463b, #25271f);
  border: 3px solid #1a1b16;
}

.memory-frame-inner span {
  color: #aaa494;
  font-family: "Press Start 2P", monospace;
  font-size: 9px;
  text-align: center;
  line-height: 1.7;
}

.mc-memory-empty h3 {
  margin-top: 15px;
  color: #fff;
  font-family: "Press Start 2P", monospace;
  font-size: 16px;
  line-height: 1.6;
  text-shadow: 3px 3px 0 #000;
}

.mc-memory-empty p {
  max-width: 720px;
  margin-top: 15px;
  color: #a9a395;
  font-size: 13px;
  line-height: 1.75;
}

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

@media (max-width: 650px) {
  .mc-memory-empty {
    grid-template-columns: 1fr;
    padding: 20px;
  }

  .memory-frame {
    max-width: 240px;
  }

  .server-connect-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .server-connect-row strong {
    text-align: left;
  }
}

/* =========================================================
   DEDICATED ZYNOX SERVER PAGES
========================================================= */

.mc-server-card {
  cursor: pointer;
  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

.mc-server-card:hover {
  transform: translateY(-8px) scale(1.01);
  border-color: #8bd76d;
  box-shadow:
    0 0 0 2px rgba(139,215,109,.12),
    0 12px 0 #090907,
    0 24px 45px rgba(0,0,0,.32);
}

.server-enhanced:hover {
  border-color: #b287ed;
  box-shadow:
    0 0 0 2px rgba(178,135,237,.12),
    0 12px 0 #090907,
    0 24px 45px rgba(0,0,0,.32);
}

.mc-server-card:focus-visible {
  outline: 3px solid #f4d35e;
  outline-offset: 4px;
}

.server-enter-hint {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding-top: 15px;
  border-top: 2px solid #302d24;
}

.server-enter-hint span {
  color: #777164;
  font-family: "Press Start 2P", monospace;
  font-size: 6px;
}

.server-enter-hint strong {
  color: #b8b09d;
  font-family: "Press Start 2P", monospace;
  font-size: 7px;
}

/* Dedicated server hero */

.server-page main {
  position: relative;
  z-index: 2;
}

.server-hero-panel {
  position: relative;
  max-width: 1180px;
  margin: 45px auto 0;
  padding: 28px;
  background:
    linear-gradient(
      145deg,
      rgba(45,42,33,.98),
      rgba(17,16,13,.99)
    );
  border: 4px solid #554e40;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.035),
    0 10px 0 #090907,
    0 30px 70px rgba(0,0,0,.35);
  animation: zynoxWorldEnter .45s ease both;
}

.server-back {
  display: inline-flex;
  color: #918a7a;
  text-decoration: none;
  font-family: "Press Start 2P", monospace;
  font-size: 7px;
  transition: color .15s ease, transform .15s ease;
}

.server-back:hover {
  color: white;
  transform: translateX(-4px);
}

.server-hero-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
  margin-top: 35px;
}

.server-hero-main h1 {
  margin-top: 18px;
  color: #fff;
  font-family: "Press Start 2P", monospace;
  font-size: clamp(28px, 5vw, 58px);
  line-height: 1.25;
  text-shadow:
    5px 5px 0 #000;
}

.server-hero-main p {
  max-width: 720px;
  margin-top: 20px;
  color: #aba596;
  font-size: 15px;
  line-height: 1.8;
}

.server-live-indicator {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  color: #8fe379;
  background: rgba(76,169,52,.08);
  border: 2px solid #315d27;
  font-family: "Press Start 2P", monospace;
  font-size: 7px;
  white-space: nowrap;
}

.server-live-indicator span {
  width: 10px;
  height: 10px;
  background: #65dc52;
  border: 2px solid #1e5417;
  animation: serverPulse 1.5s infinite;
}

.server-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

.server-play-button {
  min-width: 230px;
}

.server-connection-panel {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
  margin-top: 30px;
  padding: 3px;
  background: #090908;
  border: 2px solid #373329;
}

.connection-box {
  min-height: 96px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 18px;
  background:
    linear-gradient(180deg, #29271f, #171611);
  border: 2px solid #383328;
}

.connection-box span {
  color: #777163;
  font-family: "Press Start 2P", monospace;
  font-size: 6px;
}

.connection-box strong {
  margin-top: 12px;
  color: #f1ecde;
  font-family: "Press Start 2P", monospace;
  font-size: 9px;
  line-height: 1.6;
  word-break: break-word;
}

.server-feature-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
  padding: 22px;
  background:
    linear-gradient(180deg, #25231d, #15140f);
  border: 3px solid #464134;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.025),
    0 7px 0 #0a0a08;
}

.server-feature {
  padding: 13px 15px;
  color: #ddd8ca;
  background: #11100d;
  border: 2px solid #3b372d;
  font-family: "Press Start 2P", monospace;
  font-size: 7px;
  line-height: 1.6;
}

.server-memory-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 32px;
}

.server-memory-card {
  overflow: hidden;
  background: #191813;
  border: 3px solid #494336;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.025),
    0 8px 0 #0a0a08;
}

.memory-media {
  min-height: 240px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, #34372e, #1b1d18);
  border-bottom: 3px solid #403b31;
  position: relative;
}

.memory-media span {
  padding: 9px 11px;
  color: #b6af9d;
  background: rgba(0,0,0,.45);
  border: 2px solid #5b5446;
  font-family: "Press Start 2P", monospace;
  font-size: 7px;
}

.server-memory-body {
  padding: 20px;
}

.server-memory-body h3 {
  margin-top: 13px;
  color: white;
  font-family: "Press Start 2P", monospace;
  font-size: 13px;
  line-height: 1.6;
  text-shadow: 2px 2px 0 #000;
}

.server-memory-body p {
  margin-top: 12px;
  color: #a29b8c;
  font-size: 12px;
  line-height: 1.7;
}

.memory-players {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 15px;
}

.memory-players span {
  padding: 6px 8px;
  color: #ddd8ca;
  background: #26231d;
  border: 2px solid #454034;
  font-family: "Press Start 2P", monospace;
  font-size: 6px;
}

.server-memory-empty {
  display: flex;
  align-items: center;
  gap: 25px;
  padding: 28px;
  margin-top: 32px;
  background:
    linear-gradient(180deg, #29271f, #15140f);
  border: 3px dashed #514b3d;
}

.memory-empty-icon {
  width: 74px;
  height: 74px;
  flex: 0 0 74px;
  display: grid;
  place-items: center;
  color: #948c79;
  background: #11100d;
  border: 3px solid #514b3d;
  font-family: "Press Start 2P", monospace;
  font-size: 24px;
}

.server-memory-empty h3 {
  margin-top: 10px;
  color: white;
  font-family: "Press Start 2P", monospace;
  font-size: 14px;
  line-height: 1.7;
}

.server-memory-empty p {
  max-width: 720px;
  margin-top: 10px;
  color: #9d9687;
  font-size: 12px;
  line-height: 1.7;
}

.server-page .minecraft-footer-cta {
  margin-top: 80px;
}

@keyframes zynoxWorldEnter {
  from {
    opacity: 0;
    transform: translateY(18px) scale(.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes serverPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: .45;
    transform: scale(.82);
  }
}

@media (max-width: 900px) {
  .server-hero-panel {
    margin-left: 20px;
    margin-right: 20px;
  }

  .server-connection-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .server-memory-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  .server-hero-panel {
    margin-top: 20px;
    padding: 19px;
  }

  .server-hero-main {
    flex-direction: column;
    gap: 18px;
  }

  .server-action-row {
    flex-direction: column;
  }

  .server-action-row .mc-button {
    width: 100%;
  }

  .server-connection-panel {
    grid-template-columns: 1fr;
  }

  .server-memory-empty {
    align-items: flex-start;
    flex-direction: column;
    padding: 20px;
  }
}

body {
  transition: opacity .28s ease, transform .28s ease;
}

body.zynox-page-leaving {
  opacity: 0;
  transform: scale(.985);
  pointer-events: none;
}

/* =========================================================
   ZYNOX MEMORY GALLERY MEDIA
========================================================= */

.memory-media {
  overflow: hidden;
}

.memory-media img,
.memory-media video {
  width: 100%;
  height: 240px;
  display: block;
  object-fit: cover;
  background: #11100d;
  transition: transform .35s ease, filter .35s ease;
}

.server-memory-card:hover .memory-media img,
.server-memory-card:hover .memory-media video {
  transform: scale(1.035);
  filter: brightness(1.08);
}

.memory-video-badge,
.memory-featured-badge {
  position: absolute;
  top: 12px;
  z-index: 2;
  padding: 7px 9px;
  font-family: "Press Start 2P", monospace;
  font-size: 6px;
  border: 2px solid #332f26;
  box-shadow: 3px 3px 0 rgba(0,0,0,.35);
}

.memory-video-badge {
  left: 12px;
  color: #17120d;
  background: #f1cc55;
  border-color: #80671f;
}

.memory-featured-badge {
  right: 12px;
  color: #171017;
  background: #b287ed;
  border-color: #5f4385;
}

.memory-media {
  min-height: 240px;
  position: relative;
}

@media (max-width: 650px) {
  .memory-media img,
  .memory-media video {
    height: 210px;
  }
}

.memory-video-wrap {
  position: relative;
  width: 100%;
  height: 240px;
  background: #11100d;
}

.memory-video-wrap video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.memory-play-overlay {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 86px;
  min-height: 42px;
  padding: 10px 12px;
  color: #16130e;
  background: #f1cc55;
  border: 3px solid #80671f;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.35),
    4px 4px 0 rgba(0,0,0,.35);
  font-family: "Press Start 2P", monospace;
  font-size: 7px;
  cursor: pointer;
  z-index: 3;
}

.memory-play-overlay:hover {
  filter: brightness(1.08);
}

.memory-play-overlay.is-playing {
  opacity: .78;
}

@media (max-width: 650px) {
  .memory-video-wrap {
    height: 210px;
  }
}

/* =========================================================
   ZYNOX MEMORY ZIG-ZAG TIMELINE
========================================================= */

.server-memory-grid {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 42px;
  margin-top: 48px;
}

.server-memory-grid::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  transform: translateX(-50%);
  background:
    repeating-linear-gradient(
      to bottom,
      #4d4739 0 12px,
      transparent 12px 22px
    );
  opacity: .8;
}

.server-memory-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  width: min(100%, 1040px);
  margin: 0 auto;
  overflow: visible;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.server-memory-card .memory-media {
  min-width: 0;
  width: min(100%, 390px);
  justify-self: end;
  overflow: hidden;
  background: #171611;
  border: 3px solid #514b3d;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.025),
    0 7px 0 #090907,
    0 16px 28px rgba(0,0,0,.24);
}

.server-memory-card .memory-media img,
.server-memory-card .memory-media video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.server-memory-card .memory-media video {
  background: #080807;
}

.server-memory-body {
  width: min(100%, 440px);
  padding: 22px 24px;
  justify-self: start;
  background:
    linear-gradient(180deg, #29271f, #15140f);
  border: 3px solid #494336;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.025),
    0 7px 0 #090907;
}

.memory-reverse .memory-media {
  grid-column: 3;
  grid-row: 1;
  justify-self: start;
}

.memory-reverse .memory-timeline-node {
  grid-column: 2;
  grid-row: 1;
}

.memory-reverse .server-memory-body {
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
}

.memory-forward .memory-media {
  grid-column: 1;
  grid-row: 1;
}

.memory-forward .memory-timeline-node {
  grid-column: 2;
  grid-row: 1;
}

.memory-forward .server-memory-body {
  grid-column: 3;
  grid-row: 1;
}

.memory-timeline-node {
  position: relative;
  z-index: 3;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  justify-self: center;
  background:
    linear-gradient(145deg, #6f5b37, #332b1c);
  border: 4px solid #9b8355;
  box-shadow:
    inset 0 0 0 3px #1b1913,
    0 6px 0 #090907;
}

.memory-timeline-node span {
  color: #f1d47a;
  font-family: "Press Start 2P", monospace;
  font-size: 7px;
  text-shadow: 2px 2px 0 #000;
}

.memory-featured-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 4;
  padding: 7px 9px;
  color: #17120b;
  background: #f0cc58;
  border: 2px solid #6a5218;
  font-family: "Press Start 2P", monospace;
  font-size: 6px;
  box-shadow: 3px 3px 0 rgba(0,0,0,.55);
}

.memory-video-wrap {
  position: relative;
  width: 100%;
}

.memory-play-overlay {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 12px 16px;
  color: white;
  background: rgba(10,10,8,.82);
  border: 3px solid #81765e;
  font-family: "Press Start 2P", monospace;
  font-size: 7px;
  cursor: pointer;
}

.memory-play-overlay:hover {
  filter: brightness(1.15);
}

.memory-video-badge {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 6px 8px;
  color: #fff;
  background: rgba(0,0,0,.7);
  border: 2px solid #6d6554;
  font-family: "Press Start 2P", monospace;
  font-size: 6px;
}

@media (max-width: 900px) {
  .server-memory-grid::before {
    left: 27px;
    transform: none;
  }

  .server-memory-card,
  .memory-forward .memory-media,
  .memory-forward .memory-timeline-node,
  .memory-forward .server-memory-body,
  .memory-reverse .memory-media,
  .memory-reverse .memory-timeline-node,
  .memory-reverse .server-memory-body {
    grid-column: auto;
    grid-row: auto;
  }

  .server-memory-card {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 15px;
  }

  .server-memory-card .memory-media {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100%;
    justify-self: start;
  }

  .server-memory-card .memory-timeline-node {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    align-self: center;
  }

  .server-memory-card .server-memory-body {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: 100%;
    justify-self: start;
  }
}

@media (max-width: 650px) {
  .server-memory-grid {
    gap: 30px;
  }

  .server-memory-grid::before {
    left: 20px;
  }

  .server-memory-card {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 11px;
  }

  .memory-timeline-node {
    width: 40px;
    height: 40px;
    border-width: 3px;
  }

  .memory-timeline-node span {
    font-size: 6px;
  }

  .server-memory-card .memory-media {
    width: 100%;
  }

  .server-memory-body {
    padding: 17px;
  }
}

/* =========================================================
   ZYNOX MEMORY TIMELINE
========================================================= */

.server-memories-section {
  position: relative;
}

.server-memories-section::before {
  content: "";
  position: absolute;
  top: 180px;
  bottom: 80px;
  left: 50%;
  width: 4px;
  transform: translateX(-50%);
  background:
    repeating-linear-gradient(
      to bottom,
      #65583f 0 14px,
      transparent 14px 24px
    );
  opacity: .8;
  pointer-events: none;
}

.server-memory-grid {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 34px;
  margin-top: 42px;
}

.server-memory-card {
  position: relative;
  width: calc(50% - 42px);
  margin: 0;
}

.server-memory-card:nth-child(odd) {
  align-self: flex-start;
}

.server-memory-card:nth-child(even) {
  align-self: flex-end;
}

/* Timeline connector */

.server-memory-card::after {
  content: "";
  position: absolute;
  top: 38px;
  width: 42px;
  height: 3px;
  background: #65583f;
  box-shadow: 0 2px 0 #17150f;
}

.server-memory-card:nth-child(odd)::after {
  right: -42px;
}

.server-memory-card:nth-child(even)::after {
  left: -42px;
}

/* Number marker */



.server-memory-grid {
}

.server-memory-card:nth-child(odd)::before {
  right: -62px;
}

.server-memory-card:nth-child(even)::before {
  left: -62px;
}

/* Better memory composition */

.server-memory-card {
  background: #171611;
  border: 3px solid #4c4639;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.025),
    0 8px 0 #090907,
    0 16px 30px rgba(0,0,0,.20);
  overflow: hidden;
}

.server-memory-card:hover {
  transform: translateY(-4px);
  border-color: #81704e;
}

.server-memory-card .memory-media {
  min-height: 255px;
  aspect-ratio: 16 / 10;
  background:
    linear-gradient(135deg, #33372e, #171914);
  overflow: hidden;
}

.server-memory-card .memory-media img,
.server-memory-card .memory-media video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.server-memory-body {
  padding: 18px 20px 20px;
}

.server-memory-body h3 {
  max-width: 90%;
}

.server-memory-body p {
  max-width: 95%;
}

.server-memory-card:nth-child(even) .server-memory-body {
  text-align: right;
}

.server-memory-card:nth-child(even) .memory-players {
  justify-content: flex-end;
}

.server-memory-card:nth-child(even) .category-tag {
  margin-left: auto;
}

/* Featured memories */

.server-memory-card.featured {
  border-color: #b08a4b;
  box-shadow:
    0 0 0 2px rgba(176,138,75,.12),
    0 8px 0 #090907,
    0 18px 35px rgba(0,0,0,.25);
}

.server-memory-card.featured .memory-media::after {
  content: "FEATURED";
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 7px 9px;
  color: #20190c;
  background: #d8b85d;
  border: 2px solid #765c25;
  font-family: "Press Start 2P", monospace;
  font-size: 6px;
}

/* Empty state must stay centered */

.server-memory-grid > .server-memory-empty {
  width: 100%;
}

/* =========================================================
   MOBILE MEMORY GRID
========================================================= */

@media (max-width: 650px) {

  .server-memories-section::before {
    display: none;
  }

  .server-memory-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 25px;
  }

  .server-memory-card {
    width: 100%;
    align-self: stretch !important;
    border-width: 2px;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.025),
      0 4px 0 #090907;
  }

  .server-memory-card::after {
    display: none;
  }

  .server-memory-card::before {
    top: 7px;
    left: 7px !important;
    right: auto !important;
    width: 27px;
    height: 27px;
    border-width: 2px;
    box-shadow:
      0 0 0 2px #11100d,
      0 3px 0 #090907;
    font-size: 5px;
  }

  .server-memory-card .memory-media {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .server-memory-card .memory-media span {
    padding: 4px 5px;
    font-size: 4px;
  }

  .server-memory-body,
  .server-memory-card:nth-child(even) .server-memory-body {
    padding: 9px;
    text-align: left;
  }

  .server-memory-body .category-tag,
  .server-memory-card:nth-child(even) .category-tag {
    margin-left: 0;
    padding: 4px 5px;
    font-size: 4px;
  }

  .server-memory-body h3 {
    max-width: 100%;
    margin-top: 7px;
    font-size: 7px;
    line-height: 1.45;
  }

  .server-memory-body p {
    max-width: 100%;
    margin-top: 6px;
    font-size: 8px;
    line-height: 1.4;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .server-memory-card:nth-child(even) .memory-players {
    justify-content: flex-start;
  }

  .memory-players {
    gap: 3px;
    margin-top: 7px;
  }

  .memory-players span {
    padding: 3px 4px;
    border-width: 1px;
    font-size: 4px;
  }

  .server-memory-card.featured .memory-media::after {
    left: 6px;
    top: 6px;
    padding: 4px 5px;
    border-width: 1px;
    font-size: 4px;
  }

}

/* =========================================================
   TRUE ZYNOX ZIG-ZAG MEMORIES
========================================================= */

.server-memories-section::before {
  display: none;
}

.server-memory-grid {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 38px;
  counter-reset: none;
}

.server-memory-card {
  width: 100%;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  overflow: hidden;
  border: 3px solid #4c4639;
  background: #171611;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.025),
    0 8px 0 #090907,
    0 16px 30px rgba(0,0,0,.20);
  transform: none;
}

.server-memory-card::before,
.server-memory-card::after {
  display: none !important;
}

.server-memory-card:nth-child(odd) .memory-media {
  order: 1;
}

.server-memory-card:nth-child(odd) .server-memory-body {
  order: 2;
  text-align: left;
}

.server-memory-card:nth-child(even) .memory-media {
  order: 2;
}

.server-memory-card:nth-child(even) .server-memory-body {
  order: 1;
  text-align: right;
}

.server-memory-card:nth-child(even) .memory-players {
  justify-content: flex-end;
}

.server-memory-card:nth-child(even) .category-tag {
  margin-left: auto;
}

.server-memory-card .memory-media {
  min-height: 300px;
  height: 100%;
  aspect-ratio: auto;
  border: 0;
  border-right: 3px solid #403b31;
}

.server-memory-card:nth-child(even) .memory-media {
  border-right: 0;
  border-left: 3px solid #403b31;
}

.server-memory-card .server-memory-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px;
}

.server-memory-card .server-memory-body h3 {
  font-size: 17px;
  line-height: 1.6;
}

.server-memory-card .server-memory-body p {
  font-size: 13px;
  line-height: 1.75;
  margin-top: 14px;
}

.server-memory-card .memory-players {
  margin-top: 18px;
}

@media (max-width: 900px) {

  .server-memory-grid {
    gap: 18px;
  }

  .server-memory-card {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  }

  .server-memory-card .memory-media {
    min-height: 220px;
  }

  .server-memory-card .server-memory-body {
    padding: 20px;
  }

  .server-memory-card .server-memory-body h3 {
    font-size: 13px;
  }

  .server-memory-card .server-memory-body p {
    font-size: 11px;
  }

}

@media (max-width: 650px) {

  .server-memory-grid {
    display: flex;
    gap: 14px;
  }

  .server-memory-card {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    width: 100%;
    min-height: 135px;
    border-width: 2px;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.025),
      0 4px 0 #090907;
  }

  .server-memory-card .memory-media {
    min-height: 135px;
    height: 100%;
    border-right-width: 2px;
  }

  .server-memory-card:nth-child(even) .memory-media {
    border-left-width: 2px;
  }

  .server-memory-card .server-memory-body {
    padding: 10px;
  }

  .server-memory-card .server-memory-body h3 {
    font-size: 8px;
    line-height: 1.5;
  }

  .server-memory-card .server-memory-body p {
    margin-top: 6px;
    font-size: 8px;
    line-height: 1.4;

    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .server-memory-card .category-tag {
    padding: 4px 5px;
    font-size: 4px;
  }

  .server-memory-card .memory-players {
    gap: 3px;
    margin-top: 7px;
  }

  .server-memory-card .memory-players span {
    padding: 3px 4px;
    font-size: 4px;
  }

  .server-memory-card.featured .memory-media::after {
    left: 5px;
    top: 5px;
    padding: 4px 5px;
    font-size: 4px;
  }

}


/* =========================================================
   FINAL MEMORY LAYOUT OVERRIDE
========================================================= */

.server-memory-card {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr) !important;
  grid-template-rows: 1fr !important;
  width: 100% !important;
  min-height: 300px !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* REMOVE ALL NUMBER MARKERS */
.server-memory-card::before,
.server-memory-card::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* PHOTO */
.server-memory-card .memory-media {
  grid-row: 1 !important;
  min-width: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 300px !important;
  margin: 0 !important;
  border: 0 !important;
  border-right: 3px solid #403b31 !important;
  order: initial !important;
}

.server-memory-card .memory-media img,
.server-memory-card .memory-media video {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
}

/* CAPTION / INFO */
.server-memory-card .server-memory-body {
  grid-row: 1 !important;
  min-width: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 28px !important;
  margin: 0 !important;
  order: initial !important;
  text-align: left !important;
}

/* ODD = PHOTO LEFT / INFO RIGHT */
.server-memory-card:nth-child(odd) {
  grid-template-areas: "media info" !important;
}

.server-memory-card:nth-child(odd) .memory-media {
  grid-area: media !important;
  border-right: 3px solid #403b31 !important;
  border-left: 0 !important;
}

.server-memory-card:nth-child(odd) .server-memory-body {
  grid-area: info !important;
  text-align: left !important;
}

/* EVEN = INFO LEFT / PHOTO RIGHT */
.server-memory-card:nth-child(even) {
  grid-template-areas: "info media" !important;
}

.server-memory-card:nth-child(even) .memory-media {
  grid-area: media !important;
  border-left: 3px solid #403b31 !important;
  border-right: 0 !important;
}

.server-memory-card:nth-child(even) .server-memory-body {
  grid-area: info !important;
  text-align: right !important;
}

.server-memory-card:nth-child(even) .category-tag {
  margin-left: auto !important;
}

.server-memory-card:nth-child(even) .memory-players {
  justify-content: flex-end !important;
}

/* MOBILE: KEEP TRUE ZIG-ZAG, JUST COMPACT */
@media (max-width: 650px) {

  .server-memory-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .server-memory-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr) !important;
    grid-template-rows: 1fr !important;
    min-height: 150px !important;
    height: 150px !important;
    width: 100% !important;
  }

  .server-memory-card .memory-media {
    min-height: 150px !important;
    height: 150px !important;
    border-width: 2px !important;
  }

  .server-memory-card .server-memory-body {
    min-height: 150px !important;
    height: 150px !important;
    padding: 10px !important;
  }

  .server-memory-body h3 {
    margin-top: 7px !important;
    font-size: 8px !important;
    line-height: 1.45 !important;
  }

  .server-memory-body p {
    margin-top: 6px !important;
    font-size: 8px !important;
    line-height: 1.4 !important;

    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .server-memory-body .category-tag {
    margin-left: 0 !important;
  }

  .server-memory-card:nth-child(even) .category-tag {
    margin-left: auto !important;
  }

}


/* Remove memory numbering completely */
.server-memory-card::before {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
}



/* =========================================================
   MEMORY CARD FINAL CLEANUP
========================================================= */

.server-memory-card .memory-timeline-node,
.server-memory-card .category-tag {
  display: none !important;
}

.server-memory-card .server-memory-body {
  justify-content: flex-start !important;
  padding-top: 30px !important;
}

.server-memory-card .server-memory-body h3 {
  margin-top: 0 !important;
  font-size: clamp(15px, 1.7vw, 22px) !important;
  line-height: 1.55 !important;
  letter-spacing: .3px !important;
  text-shadow:
    2px 2px 0 #000,
    0 0 12px rgba(255,255,255,.06);
}

.server-memory-card .server-memory-body p {
  margin-top: 14px !important;
  font-size: 13px !important;
  line-height: 1.75 !important;
  color: #b4ad9d !important;
}

@media (max-width: 650px) {
  .server-memory-card .server-memory-body {
    padding: 13px !important;
    justify-content: flex-start !important;
  }

  .server-memory-card .server-memory-body h3 {
    font-size: 10px !important;
    line-height: 1.5 !important;
  }

  .server-memory-card .server-memory-body p {
    margin-top: 7px !important;
    font-size: 8px !important;
    line-height: 1.45 !important;
  }
}

/* =========================================================
   MEMORY MEDIA FINAL FIX
   Full image visible, NO CROPPING
========================================================= */

.server-memory-card .memory-media {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 20% 20%, rgba(139,215,109,.10), transparent 30%),
    radial-gradient(circle at 80% 80%, rgba(178,135,237,.10), transparent 30%),
    #11100d !important;
}

/* Full image/video stays visible */
.server-memory-card .memory-media img,
.server-memory-card .memory-media video {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #11100d !important;
}

/* Keep image from being enlarged beyond its natural frame */
.server-memory-card .memory-media img {
  image-rendering: auto;
}

/* Decorative pixel corners */
.server-memory-card .memory-media::before,
.server-memory-card .memory-media::after {
  content: "";
  position: absolute;
  z-index: 3;
  width: 24px;
  height: 24px;
  pointer-events: none;
}

.server-memory-card .memory-media::before {
  top: 10px;
  left: 10px;
  border-top: 3px solid #8bd76d;
  border-left: 3px solid #8bd76d;
}

.server-memory-card .memory-media::after {
  right: 10px;
  bottom: 10px;
  border-right: 3px solid #b287ed;
  border-bottom: 3px solid #b287ed;
}

/* Don't zoom the actual memory image */
.server-memory-card:hover .memory-media img,
.server-memory-card:hover .memory-media video {
  transform: none !important;
  filter: brightness(1.06) !important;
}

/* Video frame */
.memory-video-wrap {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #11100d !important;
}

.memory-video-wrap video {
  object-fit: contain !important;
}

/* More breathing room for caption panel */
.server-memory-card .server-memory-body {
  padding: 32px 30px !important;
}

.server-memory-card .server-memory-body p {
  max-width: 100% !important;
}

/* Mobile */
@media (max-width: 650px) {
  .server-memory-card .memory-media,
  .memory-video-wrap {
    min-height: 220px !important;
  }

  .server-memory-card .memory-media img,
  .server-memory-card .memory-media video {
    height: 100% !important;
    width: 100% !important;
    object-fit: contain !important;
  }

  .server-memory-card .server-memory-body {
    padding: 22px !important;
  }
}

/* =========================================================
   ZYNOX CREATIONS
========================================================= */

.creation-empty-panel {
  position: relative;
  display: grid;
  grid-template-columns: 42% 58%;
  min-height: 330px;
  margin-top: 32px;
  overflow: hidden;
  background:
    linear-gradient(135deg, #29271f, #13120e);
  border: 3px solid #514b3d;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.025),
    0 9px 0 #090907,
    0 20px 40px rgba(0,0,0,.25);
}

.creation-scene {
  position: relative;
  min-height: 330px;
  overflow: hidden;
  background:
    linear-gradient(
      180deg,
      rgba(52,70,83,.75),
      rgba(22,27,23,.96)
    );
  border-right: 3px solid #453f33;
}

.creation-scene::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 82px;
  background:
    linear-gradient(#5c513b 0 14%, #39362a 14% 100%);
  opacity: .9;
}

.creation-character {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 28px;
  width: 170px;
  max-height: 230px;
  object-fit: contain;
  transform: translateX(-50%);
  image-rendering: pixelated;
  filter: drop-shadow(7px 7px 0 rgba(0,0,0,.35));
}

.creation-item {
  position: absolute;
  z-index: 3;
  width: 48px;
  height: 48px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(4px 4px 0 rgba(0,0,0,.35));
}

.creation-diamond {
  top: 43px;
  right: 48px;
  animation: creationFloat 2.8s ease-in-out infinite;
}

.creation-pickaxe {
  left: 34px;
  bottom: 56px;
  transform: rotate(-18deg);
}

.creation-particle {
  position: absolute;
  z-index: 1;
  width: 27px;
  height: 27px;
  image-rendering: pixelated;
  opacity: .72;
}

.creation-particle-one {
  left: 18%;
  top: 28%;
  animation: creationFloat 2.2s ease-in-out infinite;
}

.creation-particle-two {
  right: 20%;
  top: 62%;
  animation: creationFloat 2.5s ease-in-out infinite reverse;
}

.creation-empty-content {
  align-self: center;
  padding: 38px;
}

.creation-empty-content h3 {
  margin-top: 18px;
  color: #fff;
  font-family: "Press Start 2P", monospace;
  font-size: clamp(16px, 2vw, 23px);
  line-height: 1.65;
  text-shadow: 3px 3px 0 #000;
}

.creation-empty-content p {
  max-width: 650px;
  margin-top: 15px;
  color: #aaa395;
  font-size: 13px;
  line-height: 1.8;
}

.creation-empty-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.creation-empty-slots span {
  padding: 9px 10px;
  color: #817a6b;
  background: #0f0e0b;
  border: 2px dashed #403a2f;
  font-family: "Press Start 2P", monospace;
  font-size: 6px;
}

@keyframes creationFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* =========================================================
   COMMUNITY
========================================================= */

.community-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 32px;
}

.community-card {
  position: relative;
  min-height: 245px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 22px;
  overflow: hidden;
  color: white;
  text-decoration: none;
  background:
    linear-gradient(180deg, #29271f, #15140f);
  border: 3px solid #4d473a;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.025),
    0 7px 0 #090907;
  transition:
    transform .18s ease,
    border-color .18s ease,
    filter .18s ease;
}

.community-card:hover {
  transform: translateY(-7px);
  border-color: #8a806a;
  filter: brightness(1.06);
}

.community-card::after {
  content: "";
  position: absolute;
  right: -45px;
  bottom: -45px;
  width: 150px;
  height: 150px;
  opacity: .12;
  transform: rotate(45deg);
  background: #ffffff;
  pointer-events: none;
}

.community-icon {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  background: #11100d;
  border: 3px solid #575043;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.03),
    4px 4px 0 rgba(0,0,0,.28);
}

.community-icon span {
  font-family: "Press Start 2P", monospace;
  font-size: 11px;
  text-shadow: 2px 2px 0 #000;
}

.community-youtube {
  border-color: #6b4038;
}

.community-youtube .community-icon {
  border-color: #8b5045;
}

.community-youtube .community-icon span {
  color: #ff7663;
}

.community-discord {
  border-color: #53477a;
}

.community-discord .community-icon {
  border-color: #6e5c9d;
}

.community-discord .community-icon span {
  color: #b287ed;
}

.community-instagram {
  border-color: #65405c;
}

.community-instagram .community-icon {
  border-color: #865276;
}

.community-instagram .community-icon span {
  color: #e291c9;
}

.community-content {
  position: relative;
  z-index: 1;
}

.community-label {
  display: block;
  margin-top: 24px;
  color: #777163;
  font-family: "Press Start 2P", monospace;
  font-size: 6px;
}

.community-content h3 {
  margin-top: 10px;
  font-family: "Press Start 2P", monospace;
  font-size: 17px;
  text-shadow: 3px 3px 0 #000;
}

.community-content p {
  margin-top: 11px;
  color: #aaa396;
  font-size: 12px;
  line-height: 1.65;
}

.community-content strong {
  display: inline-block;
  margin-top: 17px;
  color: #e9e4d7;
  font-family: "Press Start 2P", monospace;
  font-size: 7px;
}

@media (max-width: 900px) {
  .creation-empty-panel {
    grid-template-columns: 1fr;
  }

  .creation-scene {
    min-height: 270px;
    border-right: 0;
    border-bottom: 3px solid #453f33;
  }

  .community-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  .creation-scene {
    min-height: 235px;
  }

  .creation-character {
    width: 135px;
    max-height: 190px;
  }

  .creation-empty-content {
    padding: 24px 20px;
  }

  .creation-empty-content p {
    font-size: 12px;
  }

  .community-card {
    min-height: 220px;
  }
}

/* =========================================================
   SERVER CARD WORLD ART
========================================================= */

.server-art {
  position: relative;
  height: 185px;
  margin: -26px -26px 24px;
  overflow: hidden;
  border-bottom: 3px solid #403a2f;
  background:
    linear-gradient(180deg, rgba(76,106,83,.42), rgba(25,27,21,.96)),
    url("/assets/minecraft/environment/clouds.png") center top / 65% auto no-repeat;
}

.server-art::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 48px;
  background:
    linear-gradient(
      180deg,
      rgba(94,120,67,.95),
      rgba(52,66,39,.98)
    );
  border-top: 3px solid rgba(139,215,109,.35);
}

.server-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(255,255,255,.04), transparent 35%),
    linear-gradient(0deg, rgba(0,0,0,.14), transparent 55%);
  pointer-events: none;
}

.server-art-enhanced {
  background:
    linear-gradient(180deg, rgba(74,57,92,.45), rgba(24,21,28,.97)),
    url("/assets/minecraft/environment/moon.png") 86% 20% / 55px no-repeat;
}

.server-art-enhanced::before {
  background:
    linear-gradient(
      180deg,
      rgba(77,63,92,.95),
      rgba(38,32,42,.98)
    );
  border-top-color: rgba(178,135,237,.35);
}

.server-art-character {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 24px;
  width: 105px;
  max-height: 145px;
  object-fit: contain;
  transform: translateX(-50%);
  image-rendering: pixelated;
  filter: drop-shadow(5px 5px 0 rgba(0,0,0,.38));
  transition: transform .2s ease;
}

.server-art-enhanced .server-art-character {
  left: 43%;
  width: 96px;
}

.server-art-enhanced .server-art-character.secondary {
  z-index: 1;
  left: 64%;
  bottom: 19px;
  width: 82px;
  opacity: .72;
}

.mc-server-card:hover .server-art-character {
  transform: translateX(-50%) translateY(-5px);
}

.server-art-item {
  position: absolute;
  z-index: 3;
  width: 43px;
  height: 43px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(4px 4px 0 rgba(0,0,0,.35));
}

.server-art-diamond {
  top: 28px;
  left: 30px;
  animation: creationFloat 2.6s ease-in-out infinite;
}

.server-art-pick {
  right: 29px;
  bottom: 25px;
  transform: rotate(-20deg);
}

.server-art-emerald {
  top: 26px;
  right: 32px;
  animation: creationFloat 2.4s ease-in-out infinite reverse;
}

.server-art-sword {
  left: 27px;
  bottom: 27px;
  transform: rotate(18deg);
}

.server-art-particle {
  position: absolute;
  z-index: 1;
  width: 22px;
  height: 22px;
  object-fit: contain;
  image-rendering: pixelated;
  opacity: .75;
}

.server-art-particle-a {
  top: 35px;
  left: 25%;
  animation: creationFloat 2.1s ease-in-out infinite;
}

.server-art-particle-b {
  top: 74px;
  right: 24%;
  animation: creationFloat 2.8s ease-in-out infinite reverse;
}

@media (max-width: 650px) {
  .server-art {
    height: 165px;
    margin: -26px -26px 21px;
  }

  .server-art-character {
    width: 94px;
    max-height: 130px;
  }

  .server-art-enhanced .server-art-character {
    width: 84px;
  }

  .server-art-enhanced .server-art-character.secondary {
    width: 72px;
  }
}

/* =========================================================
   ZYNOX WORLD SHOWCASE
========================================================= */

.zy-world-showcase {
  position: relative;
  margin-top: 34px;
  padding: 5px;
  background: #090908;
  border: 3px solid #4b4639;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.025),
    0 8px 0 #080806,
    0 22px 45px rgba(0,0,0,.28);
}

.world-showcase-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 14px 17px;
  background:
    linear-gradient(180deg, #302d24, #1b1a15);
  border-bottom: 3px solid #3e392e;
}

.world-kicker {
  color: #f0e8d5;
  font-family: "Press Start 2P", monospace;
  font-size: 8px;
  text-shadow: 2px 2px 0 #000;
}

.world-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #8bd76d;
  font-family: "Press Start 2P", monospace;
  font-size: 6px;
}

.world-live i {
  width: 9px;
  height: 9px;
  background: #65dc52;
  border: 2px solid #23591c;
  animation: serverPulse 1.5s infinite;
}

.world-showcase-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  padding: 5px;
  background: #11100d;
}

.world-mini-card {
  position: relative;
  display: grid;
  grid-template-columns: 108px 1fr auto;
  align-items: center;
  gap: 16px;
  min-height: 116px;
  padding: 13px;
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  background:
    linear-gradient(180deg, #29271f, #171611);
  border: 3px solid #423d31;
  transition:
    transform .18s ease,
    border-color .18s ease,
    filter .18s ease;
}

.world-mini-card:hover {
  transform: translateY(-4px);
  border-color: #8bd76d;
  filter: brightness(1.08);
}

.world-mini-enhanced:hover {
  border-color: #b287ed;
}

.world-mini-art {
  position: relative;
  height: 88px;
  overflow: hidden;
  background:
    linear-gradient(180deg, #394333 0%, #293026 58%, #171814 58%, #151510 100%);
  border: 3px solid #575141;
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,.28),
    0 4px 0 #0b0b09;
}

.world-mini-enhanced .world-mini-art {
  background:
    linear-gradient(180deg, #403752 0%, #29243a 58%, #17151c 58%, #111016 100%);
}

.world-art-block {
  position: absolute;
  image-rendering: pixelated;
}

.world-art-grass {
  width: 55px;
  height: 42px;
  left: -8px;
  bottom: 9px;
  background: #4f913b;
  box-shadow:
    17px -10px 0 #65a548,
    41px -2px 0 #35652a,
    48px 18px 0 #2c5925;
}

.world-art-stone {
  width: 35px;
  height: 35px;
  right: 8px;
  top: 13px;
  background: #77766d;
  box-shadow:
    -8px 10px 0 #66655e,
    -22px 23px 0 #55544e;
}

.world-art-ore {
  width: 16px;
  height: 16px;
  right: 28px;
  bottom: 11px;
  background: #68a9d9;
  box-shadow:
    8px 7px 0 #9bd4f5,
    -7px 10px 0 #4d82aa;
}

.world-art-purple {
  width: 49px;
  height: 43px;
  left: 2px;
  bottom: 11px;
  background: #6e469c;
  box-shadow:
    17px -12px 0 #9765c8,
    38px 7px 0 #513171;
}

.world-art-deep {
  width: 33px;
  height: 38px;
  right: 7px;
  top: 10px;
  background: #292b49;
  box-shadow:
    -9px 16px 0 #1f2038,
    -20px 27px 0 #15162b;
}

.world-art-crystal {
  width: 12px;
  height: 29px;
  right: 30px;
  bottom: 8px;
  background: #c292ff;
  transform: rotate(20deg);
  box-shadow:
    9px 6px 0 #8a58ba,
    -7px 11px 0 #e0c5ff;
}

.world-mini-content {
  min-width: 0;
}

.world-mini-content > span {
  display: block;
  color: #837c6c;
  font-family: "Press Start 2P", monospace;
  font-size: 6px;
}

.world-mini-content strong {
  display: block;
  margin-top: 11px;
  color: #fff;
  font-family: "Press Start 2P", monospace;
  font-size: 12px;
  line-height: 1.55;
  text-shadow: 2px 2px 0 #000;
}

.world-mini-content small {
  display: block;
  margin-top: 8px;
  color: #999284;
  font-size: 10px;
}

.world-mini-card > b {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #17150f;
  background: #81c967;
  border: 3px solid #315d27;
  font-family: "Press Start 2P", monospace;
  font-size: 13px;
  box-shadow: 0 4px 0 #14280f;
}

.world-mini-enhanced > b {
  background: #b287ed;
  border-color: #5e4384;
  box-shadow: 0 4px 0 #2b1c40;
}

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

@media (max-width: 650px) {
  .world-showcase-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .world-mini-card {
    grid-template-columns: 82px 1fr auto;
    gap: 11px;
    padding: 10px;
  }

  .world-mini-art {
    height: 78px;
  }

  .world-mini-content strong {
    font-size: 9px;
  }

  .world-mini-content small {
    font-size: 9px;
  }
}

/* =========================================================
   ZYNOX MEMORY MEDIA
========================================================= */

.memory-media {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
  background: #10100d;
}

.memory-media > img,
.memory-media .memory-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.memory-video-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: pointer;
}

.memory-video-wrap .memory-video {
  cursor: pointer;
  transition: transform .35s ease, filter .35s ease;
}

.memory-video-wrap:hover .memory-video {
  transform: scale(1.025);
  filter: brightness(1.08);
}

.memory-video-tap {
  position: absolute;
  right: 13px;
  bottom: 13px;
  padding: 7px 9px;
  color: #eee8d9;
  background: rgba(8,8,7,.72);
  border: 2px solid #5a5345;
  font-family: "Press Start 2P", monospace;
  font-size: 6px;
  pointer-events: none;
  opacity: .9;
}

.memory-video-badge,
.memory-featured-badge {
  z-index: 3;
}

.memory-media .memory-featured-badge {
  position: absolute;
  top: 12px;
  left: 12px;
}

@media (max-width: 650px) {
  .memory-media {
    height: 230px;
  }

  .memory-video-tap {
    font-size: 5px;
  }
}


/* =========================================================
   NAVBAR ASSET UPGRADE
========================================================= */

.mc-brand-z {
  position: relative;
  font-size: 24px !important;
  font-family: "Press Start 2P", monospace;
  font-weight: 900;
  color: #f3f0e6;
  text-shadow:
    3px 3px 0 #5d3f8a,
    5px 5px 0 #0a0908;
}

.mc-brand-z::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 2px solid rgba(255,255,255,.16);
  pointer-events: none;
}

.mc-store-button {
  min-width: 112px;
  background-image:
    url("/assets/ui/Colored/green.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  color: #10150c !important;
  text-shadow: 1px 1px 0 rgba(255,255,255,.18);
}

.mc-store-button:hover {
  background-image:
    url("/assets/ui/Colored/green_pressed.png");
  filter: brightness(1.08);
}

.mc-store-button:active {
  background-image:
    url("/assets/ui/Colored/green_pressed.png");
}

@media (max-width: 650px) {
  .mc-brand-z {
    font-size: 20px !important;
  }

  .mc-store-button {
    min-width: 96px;
  }
}

/* FINAL MEMORY MEDIA OVERRIDE */
.server-memory-card .memory-media {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
  background: #10100d;
}

.server-memory-card .memory-media > img,
.server-memory-card .memory-media .memory-video {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center;
}

.server-memory-card .memory-video-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.server-memory-card .memory-video-wrap .memory-video {
  cursor: pointer;
}

@media (max-width: 650px) {
  .server-memory-card .memory-media {
    height: 230px;
  }
}

/* =========================================================
   FINAL ZYNOX NAVBAR POLISH
========================================================= */

.mc-brand {
  gap: 13px;
  filter: drop-shadow(0 4px 0 rgba(0,0,0,.28));
}

.mc-brand-block.mc-brand-z {
  position: relative;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;

  background:
    linear-gradient(135deg, #a97cff 0%, #6a3db8 52%, #3a2169 100%),
    url("/assets/ui/Outline/blue.png");

  background-size: cover, 100% 100%;
  background-blend-mode: normal, screen;

  border: 3px solid #d5bdff;

  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.26),
    inset 0 -4px 0 rgba(0,0,0,.22),
    5px 5px 0 #120d19,
    0 0 18px rgba(166,107,255,.14);

  color: #fff;

  font-family: "Press Start 2P", monospace;
  font-size: 19px;
  font-weight: 900;
  line-height: 1;

  text-shadow:
    2px 2px 0 #241633,
    4px 4px 0 #000;

  image-rendering: pixelated;
}

.mc-brand-block.mc-brand-z::before,
.mc-brand-block.mc-brand-z::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.mc-brand-block.mc-brand-z::before {
  inset: 5px;
  border: 2px solid rgba(255,255,255,.13);
}

.mc-brand-block.mc-brand-z::after {
  width: 7px;
  height: 7px;
  right: 5px;
  top: 5px;
  background: rgba(255,255,255,.34);
}

.mc-brand-text {
  font-size: 17px;
  letter-spacing: -.7px;
}

.mc-brand-text span {
  color: inherit;
}

.mc-store-button {
  position: relative;
  min-width: 122px;
  min-height: 43px;
  padding: 10px 15px;

  background:
    url("/assets/ui/Colored/green.png") center / 100% 100% no-repeat;

  border: 0;

  color: #10170d !important;

  font-family: "Press Start 2P", monospace;
  font-size: 8px;
  font-weight: 900;
  text-align: center;
  text-shadow: 1px 1px 0 rgba(255,255,255,.18);

  image-rendering: pixelated;

  box-shadow:
    0 4px 0 #16320f,
    0 7px 10px rgba(0,0,0,.24);

  transition:
    transform .15s ease,
    filter .15s ease;
}

.mc-store-button::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 2px solid rgba(255,255,255,.18);
  pointer-events: none;
}

.mc-store-button:hover {
  background-image:
    url("/assets/ui/Colored/green_pressed.png");
  transform: translateY(-2px);
  filter: brightness(1.08);
}

.mc-store-button:active {
  transform: translateY(2px);
  box-shadow:
    0 2px 0 #16320f;
}

@media (max-width: 650px) {
  .mc-brand-block.mc-brand-z {
    width: 38px;
    height: 38px;
    font-size: 16px;
  }

  .mc-brand-text {
    font-size: 13px;
  }

  .mc-store-button {
    min-width: 92px;
    min-height: 38px;
    padding: 9px 11px;
    font-size: 7px;
  }
}

/* =========================================================
   HOMEPAGE VISUAL OVERHAUL
========================================================= */

.server-visual-card {
  isolation: isolate;
}

.server-visual-card::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 16px;
  width: 84px;
  height: 84px;
  background: url("/assets/decor/pixel-parrot.png") center / contain no-repeat;
  image-rendering: pixelated;
  pointer-events: none;
  z-index: 3;
  filter: drop-shadow(4px 6px 0 rgba(0,0,0,.45));
  transform: rotate(-4deg);
  transition: transform .2s ease, filter .2s ease;
}

.server-visual-card:hover::after {
  transform: translateY(-7px) rotate(3deg) scale(1.06);
  filter: drop-shadow(5px 9px 0 rgba(0,0,0,.5));
}

.server-visual-card .server-art {
  opacity: .94;
}

.minecraft-category-card,
.rank-card,
.minecraft-bundle {
  position: relative;
  isolation: isolate;
}

.minecraft-category-card::after,
.rank-card::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 10px;
  width: 56px;
  height: 56px;
  background: url("/assets/decor/pixel-parrot.png") center / contain no-repeat;
  image-rendering: pixelated;
  pointer-events: none;
  z-index: 4;
  opacity: .92;
  filter: drop-shadow(3px 5px 0 rgba(0,0,0,.42));
  transform: rotate(5deg);
}

.rank-card.featured::after {
  transform: rotate(-4deg) scale(1.04);
}

.creation-vault {
  position: relative;
  display: grid;
  grid-template-columns: 330px 1fr;
  gap: 28px;
  align-items: center;
  margin-top: 32px;
  padding: 28px;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 20%, rgba(115,224,82,.08), transparent 35%),
    linear-gradient(145deg, #29271f, #12110e);
  border: 4px solid #514b3d;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.025),
    0 9px 0 #090907,
    0 25px 55px rgba(0,0,0,.3);
}

.creation-vault::after {
  content: "";
  position: absolute;
  right: 28px;
  top: 16px;
  width: 72px;
  height: 72px;
  background: url("/assets/decor/pixel-parrot.png") center / contain no-repeat;
  image-rendering: pixelated;
  opacity: .92;
  transform: rotate(7deg);
  pointer-events: none;
}

.creation-vault-art {
  position: relative;
  min-height: 240px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle, rgba(130,213,92,.13), transparent 45%),
    #10100d;
  border: 3px solid #3c382f;
}

.creation-character {
  position: relative;
  z-index: 2;
  width: 150px;
  height: 150px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(8px 10px 0 rgba(0,0,0,.45));
}

.creation-diamond {
  position: absolute;
  z-index: 3;
  width: 45px;
  height: 45px;
  right: 38px;
  bottom: 30px;
  image-rendering: pixelated;
  filter: drop-shadow(3px 4px 0 rgba(0,0,0,.4));
  animation: zynoxFloat 2.8s ease-in-out infinite;
}

.creation-orbit {
  position: absolute;
  border: 2px dashed rgba(151,228,119,.2);
  border-radius: 50%;
  pointer-events: none;
}

.orbit-a {
  width: 220px;
  height: 220px;
  animation: zynoxSpin 16s linear infinite;
}

.orbit-b {
  width: 150px;
  height: 150px;
  animation: zynoxSpin 11s linear infinite reverse;
}

.creation-vault-copy {
  position: relative;
  z-index: 2;
}

.creation-vault-copy h3 {
  margin-top: 16px;
  max-width: 650px;
  color: #fff;
  font-family: "Press Start 2P", monospace;
  font-size: 17px;
  line-height: 1.7;
  text-shadow: 3px 3px 0 #000;
}

.creation-vault-copy p {
  max-width: 700px;
  margin-top: 14px;
  color: #aaa394;
  font-size: 13px;
  line-height: 1.8;
}

.creation-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.creation-slots span {
  padding: 9px 10px;
  color: #9d9788;
  background: #10100d;
  border: 2px solid #3c382f;
  font-family: "Press Start 2P", monospace;
  font-size: 6px;
}

.social-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 32px;
}

.social-card {
  position: relative;
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 16px;
  align-items: center;
  min-height: 145px;
  padding: 20px;
  overflow: hidden;
  color: white;
  text-decoration: none;
  background: linear-gradient(145deg, #28261f, #15140f);
  border: 3px solid #4b4639;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.02),
    0 7px 0 #090907;
  transition: transform .18s ease, border-color .18s ease, filter .18s ease;
}

.social-card:hover {
  transform: translateY(-7px);
  border-color: #81765f;
  filter: brightness(1.08);
}

.social-card::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: -2px;
  width: 48px;
  height: 48px;
  background: url("/assets/decor/pixel-parrot.png") center / contain no-repeat;
  image-rendering: pixelated;
  opacity: .85;
  pointer-events: none;
  transform: rotate(-6deg);
}

.social-icon-frame {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  background: #11100d;
  border: 3px solid #4e493b;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.035);
}

.social-icon-frame img {
  width: 38px;
  height: 38px;
  display: block;
  filter: brightness(0) invert(1);
}

.social-kicker {
  color: #7f796b;
  font-family: "Press Start 2P", monospace;
  font-size: 6px;
}

.social-copy h3 {
  margin-top: 8px;
  font-family: "Press Start 2P", monospace;
  font-size: 13px;
  text-shadow: 2px 2px 0 #000;
}

.social-copy p {
  margin-top: 8px;
  color: #999282;
  font-size: 11px;
  line-height: 1.6;
}

.social-arrow {
  position: absolute;
  right: 15px;
  top: 14px;
  color: #bcb5a5;
  font-family: "Press Start 2P", monospace;
  font-size: 6px;
}

.social-youtube .social-icon-frame {
  border-color: #65403d;
}

.social-discord .social-icon-frame {
  border-color: #51456f;
}

.social-instagram .social-icon-frame {
  border-color: #704c56;
}

@keyframes zynoxFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes zynoxSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

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

  .social-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  .creation-vault {
    padding: 19px;
  }

  .creation-vault-art {
    min-height: 210px;
  }

  .creation-vault-copy h3 {
    font-size: 13px;
  }

  .server-visual-card::after {
    width: 64px;
    height: 64px;
  }

  .social-card {
    grid-template-columns: 60px 1fr;
    padding: 15px;
  }

  .social-icon-frame {
    width: 60px;
    height: 60px;
  }

  .social-icon-frame img {
    width: 32px;
    height: 32px;
  }
}

/* =========================================================
   UNIQUE MINECRAFT CARD DECORATIONS
========================================================= */

.minecraft-category-card:nth-child(1)::after {
  width: 72px;
  height: 72px;
  right: 12px;
  bottom: 8px;
  background: url("/assets/minecraft/characters/fox_body.png") center / contain no-repeat;
  transform: rotate(-5deg);
}

.minecraft-category-card:nth-child(2)::after {
  width: 74px;
  height: 74px;
  right: 10px;
  bottom: 8px;
  background: url("/assets/minecraft/characters/skeleton_body.png") center / contain no-repeat;
  transform: rotate(4deg);
}

.minecraft-category-card:nth-child(3)::after {
  width: 70px;
  height: 70px;
  right: 12px;
  bottom: 8px;
  background: url("/assets/minecraft/characters/zombie_body.png") center / contain no-repeat;
  transform: rotate(-3deg);
}

.rank-card:nth-child(1)::after {
  width: 68px;
  height: 68px;
  right: 10px;
  bottom: 8px;
  background: url("/assets/minecraft/items/ore_emerald.png") center / contain no-repeat;
  transform: rotate(-8deg);
}

.rank-card:nth-child(2)::after {
  width: 72px;
  height: 72px;
  right: 10px;
  bottom: 8px;
  background: url("/assets/minecraft/items/sword_diamond.png") center / contain no-repeat;
  transform: rotate(8deg);
}

.rank-card:nth-child(3)::after {
  width: 68px;
  height: 68px;
  right: 10px;
  bottom: 8px;
  background: url("/assets/minecraft/items/ore_gold.png") center / contain no-repeat;
  transform: rotate(-5deg);
}

.social-youtube::after {
  width: 70px;
  height: 70px;
  background: url("/assets/minecraft/items/bow.png") center / contain no-repeat;
  transform: rotate(-10deg);
}

.social-discord::after {
  width: 72px;
  height: 72px;
  background: url("/assets/minecraft/items/axe_diamond.png") center / contain no-repeat;
  transform: rotate(7deg);
}

.social-instagram::after {
  width: 72px;
  height: 72px;
  background: url("/assets/minecraft/items/pick_diamond.png") center / contain no-repeat;
  transform: rotate(-7deg);
}

.server-main::after {
  width: 82px;
  height: 82px;
  background: url("/assets/characters/adventurer/adventurer_idle.png") center / contain no-repeat;
  transform: rotate(-4deg);
}

.server-enhanced::after {
  width: 82px;
  height: 82px;
  background: url("/assets/characters/zombie/zombie_idle.png") center / contain no-repeat;
  transform: rotate(4deg);
}

.minecraft-bundle::after {
  content: "";
  position: absolute;
  right: 20px;
  bottom: 15px;
  width: 88px;
  height: 88px;
  background: url("/assets/minecraft/items/minecart.png") center / contain no-repeat;
  image-rendering: pixelated;
  pointer-events: none;
  filter: drop-shadow(4px 6px 0 rgba(0,0,0,.45));
  transform: rotate(-4deg);
}

@media (max-width: 650px) {
  .minecraft-category-card:nth-child(1)::after,
  .minecraft-category-card:nth-child(2)::after,
  .minecraft-category-card:nth-child(3)::after,
  .rank-card:nth-child(1)::after,
  .rank-card:nth-child(2)::after,
  .rank-card:nth-child(3)::after {
    width: 52px;
    height: 52px;
    right: 7px;
    bottom: 6px;
  }

  .social-youtube::after,
  .social-discord::after,
  .social-instagram::after {
    width: 52px;
    height: 52px;
  }
}

/* =========================================================
   ZYNOX HOMEPAGE - UNIQUE WORLD DECOR PACK
   Replace repetitive card decorations with varied
   Minecraft-style characters, mobs, blocks and props.
========================================================= */

/* Kill the old repeated parrot decoration */
.server-visual-card::after,
.minecraft-category-card::after,
.rank-card::after,
.social-card::after {
  content: "";
  background: none;
}

/* -------------------------
   SERVER CARDS
------------------------- */

.server-main::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 14px;
  width: 105px;
  height: 105px;
  background:
    url("/assets/mobs/wolf/wolf_striped_texture.png")
    center / contain no-repeat;
  image-rendering: pixelated;
  z-index: 5;
  pointer-events: none;
  filter: drop-shadow(5px 7px 0 rgba(0,0,0,.55));
  transform: rotate(-4deg);
}

.server-enhanced::after {
  content: "";
  position: absolute;
  right: 15px;
  bottom: 10px;
  width: 105px;
  height: 125px;
  background:
    url("/assets/characters/zombie/zombie_idle.png")
    center / contain no-repeat;
  image-rendering: pixelated;
  z-index: 5;
  pointer-events: none;
  filter: drop-shadow(5px 7px 0 rgba(0,0,0,.55));
  transform: rotate(3deg);
}

/* -------------------------
   RANK CARDS
------------------------- */

.rank-card:nth-child(1)::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 8px;
  width: 82px;
  height: 82px;
  background:
    url("/assets/minecraft/items/ore_emerald.png")
    center / contain no-repeat;
  image-rendering: pixelated;
  z-index: 4;
  pointer-events: none;
  filter: drop-shadow(4px 5px 0 rgba(0,0,0,.5));
  transform: rotate(-8deg);
}

.rank-card:nth-child(2)::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 7px;
  width: 88px;
  height: 88px;
  background:
    url("/assets/minecraft/items/sword_diamond.png")
    center / contain no-repeat;
  image-rendering: pixelated;
  z-index: 4;
  pointer-events: none;
  filter: drop-shadow(4px 5px 0 rgba(0,0,0,.5));
  transform: rotate(10deg);
}

.rank-card:nth-child(3)::after {
  content: "";
  position: absolute;
  right: 9px;
  bottom: 8px;
  width: 82px;
  height: 82px;
  background:
    url("/assets/minecraft/items/ore_gold.png")
    center / contain no-repeat;
  image-rendering: pixelated;
  z-index: 4;
  pointer-events: none;
  filter: drop-shadow(4px 5px 0 rgba(0,0,0,.5));
  transform: rotate(-6deg);
}

/* -------------------------
   COSMETIC CARDS
------------------------- */

.minecraft-category-card:nth-child(1)::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 7px;
  width: 92px;
  height: 92px;
  background:
    url("/assets/minecraft/characters/fox_body.png")
    center / contain no-repeat;
  image-rendering: pixelated;
  z-index: 4;
  pointer-events: none;
  filter: drop-shadow(4px 5px 0 rgba(0,0,0,.5));
  transform: rotate(-5deg);
}

.minecraft-category-card:nth-child(2)::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 7px;
  width: 95px;
  height: 95px;
  background:
    url("/assets/minecraft/characters/skeleton_body.png")
    center / contain no-repeat;
  image-rendering: pixelated;
  z-index: 4;
  pointer-events: none;
  filter: drop-shadow(4px 5px 0 rgba(0,0,0,.5));
  transform: rotate(5deg);
}

.minecraft-category-card:nth-child(3)::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 7px;
  width: 95px;
  height: 105px;
  background:
    url("/assets/characters/player/player_action1.png")
    center / contain no-repeat;
  image-rendering: pixelated;
  z-index: 4;
  pointer-events: none;
  filter: drop-shadow(4px 5px 0 rgba(0,0,0,.5));
  transform: rotate(-3deg);
}

/* -------------------------
   SOCIAL CARDS
------------------------- */

.social-youtube::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 5px;
  width: 78px;
  height: 78px;
  background:
    url("/assets/minecraft/items/bow.png")
    center / contain no-repeat;
  image-rendering: pixelated;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(4px 5px 0 rgba(0,0,0,.5));
  transform: rotate(-9deg);
}

.social-discord::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 5px;
  width: 82px;
  height: 82px;
  background:
    url("/assets/minecraft/items/axe_diamond.png")
    center / contain no-repeat;
  image-rendering: pixelated;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(4px 5px 0 rgba(0,0,0,.5));
  transform: rotate(8deg);
}

.social-instagram::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 5px;
  width: 82px;
  height: 82px;
  background:
    url("/assets/minecraft/items/boat.png")
    center / contain no-repeat;
  image-rendering: pixelated;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(4px 5px 0 rgba(0,0,0,.5));
  transform: rotate(-6deg);
}

/* -------------------------
   BUNDLE
------------------------- */

.minecraft-bundle::after {
  content: "";
  position: absolute;
  right: 22px;
  bottom: 15px;
  width: 105px;
  height: 105px;
  background:
    url("/assets/minecraft/items/minecart.png")
    center / contain no-repeat;
  image-rendering: pixelated;
  pointer-events: none;
  z-index: 4;
  filter: drop-shadow(5px 7px 0 rgba(0,0,0,.5));
  transform: rotate(-5deg);
}

/* -------------------------
   CREATIONS
------------------------- */

.creation-vault::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 17px;
  width: 80px;
  height: 80px;
  background:
    url("/assets/minecraft/characters/fox_body.png")
    center / contain no-repeat;
  image-rendering: pixelated;
  opacity: .95;
  pointer-events: none;
  z-index: 5;
  filter: drop-shadow(4px 6px 0 rgba(0,0,0,.5));
  transform: rotate(7deg);
}

/* -------------------------
   EXTRA WORLD LAYER
------------------------- */

.mc-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 145px;
  pointer-events: none;
  background:
    linear-gradient(
      to top,
      rgba(8,9,7,.92),
      rgba(8,9,7,0)
    ),
    url("/assets/minecraft/environment/skybox_sideHills.png")
    bottom center / cover no-repeat;
  opacity: .55;
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 3;
}

.hero-floating-item {
  z-index: 4;
}

/* -------------------------
   CARD HOVER MOTION
------------------------- */

.server-main:hover::after,
.server-enhanced:hover::after,
.rank-card:hover::after,
.minecraft-category-card:hover::after,
.social-card:hover::after,
.minecraft-bundle:hover::after {
  animation: zynoxMobBounce .45s ease;
}

@keyframes zynoxMobBounce {
  0%   { transform: translateY(0) rotate(0deg) scale(1); }
  45%  { transform: translateY(-10px) rotate(-3deg) scale(1.05); }
  100% { transform: translateY(0) rotate(0deg) scale(1); }
}

@media (max-width: 650px) {
  .server-main::after,
  .server-enhanced::after {
    width: 72px;
    height: 82px;
    right: 8px;
    bottom: 8px;
  }

  .rank-card:nth-child(1)::after,
  .rank-card:nth-child(2)::after,
  .rank-card:nth-child(3)::after,
  .minecraft-category-card:nth-child(1)::after,
  .minecraft-category-card:nth-child(2)::after,
  .minecraft-category-card:nth-child(3)::after {
    width: 58px;
    height: 62px;
    right: 6px;
    bottom: 6px;
  }

  .social-youtube::after,
  .social-discord::after,
  .social-instagram::after {
    width: 55px;
    height: 55px;
  }

  .minecraft-bundle::after {
    width: 68px;
    height: 68px;
  }
}

/* =========================================================
   ZYNOX COSMIC HERO
   Minecraft world + superhero cinematic energy
========================================================= */

.mc-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 28%, rgba(88, 145, 255, .18), transparent 24%),
    radial-gradient(circle at 28% 68%, rgba(166, 87, 255, .16), transparent 30%),
    radial-gradient(circle at 82% 74%, rgba(255, 183, 70, .10), transparent 22%),
    linear-gradient(180deg, #10121b 0%, #0b0d12 52%, #080a0d 100%);
}

.mc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .38;
  background:
    linear-gradient(
      135deg,
      transparent 0 35%,
      rgba(104, 173, 255, .08) 35.5%,
      transparent 36%
    ),
    linear-gradient(
      315deg,
      transparent 0 52%,
      rgba(165, 94, 255, .07) 52.5%,
      transparent 53%
    );
}

.mc-hero::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 35%;
  width: 640px;
  height: 640px;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  border: 2px solid rgba(119, 186, 255, .12);
  border-radius: 50%;
  box-shadow:
    0 0 0 34px rgba(119, 186, 255, .025),
    0 0 0 72px rgba(166, 107, 255, .025),
    0 0 100px rgba(86, 154, 255, .10);
  animation: zynoxCorePulse 4s ease-in-out infinite;
}

.hero-content {
  position: relative;
  z-index: 5;
}

.mc-achievement {
  position: relative;
  width: fit-content;
  padding: 10px 13px;
  background: linear-gradient(180deg, #302d27, #1b1a16);
  border: 2px solid #665c4d;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.025),
    0 5px 0 #080807;
}

.mc-achievement::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -5px;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(103, 208, 255, .6),
    rgba(180, 113, 255, .6),
    transparent
  );
}

.mc-hero h1 {
  position: relative;
  max-width: 850px;
  margin-top: 34px;
  font-size: clamp(42px, 7vw, 82px);
  line-height: 1.08;
  letter-spacing: -3px;
  text-shadow:
    5px 5px 0 #050505,
    0 0 24px rgba(80, 172, 255, .10);
}

.mc-hero h1 span {
  display: block;
  margin-top: 8px;
  background:
    linear-gradient(
      90deg,
      #9ee6ff 0%,
      #74b9ff 32%,
      #b48cff 65%,
      #f5da73 100%
    );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 14px rgba(121, 176, 255, .14));
}

.hero-description {
  position: relative;
  z-index: 2;
}

.hero-buttons {
  position: relative;
  z-index: 4;
}

.hero-buttons .mc-button {
  min-height: 58px;
}

.mc-button-primary {
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.34),
    inset 0 -3px 0 rgba(0,0,0,.22),
    0 0 0 2px rgba(111, 217, 255, .05),
    var(--pixel-shadow);
}

.mc-button-primary:hover {
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.38),
    inset 0 -3px 0 rgba(0,0,0,.22),
    0 0 18px rgba(105, 214, 255, .18),
    var(--pixel-shadow);
}

/* -------------------------
   POWER CORE
------------------------- */

.mc-hero .zy-world-showcase {
  position: relative;
  z-index: 4;
  margin-top: 34px;
  max-width: 820px;
}

.mc-hero .zy-world-showcase::before {
  content: "";
  position: absolute;
  left: 76%;
  top: 40%;
  width: 180px;
  height: 180px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(255,255,255,.95) 0 5%,
      rgba(122, 213, 255, .95) 7%,
      rgba(111, 130, 255, .55) 22%,
      rgba(153, 77, 255, .16) 42%,
      transparent 68%
    );
  filter: blur(.2px);
  animation: zynoxPowerPulse 2.6s ease-in-out infinite;
  pointer-events: none;
}

.mc-hero .zy-world-showcase::after {
  content: "";
  position: absolute;
  left: 76%;
  top: 40%;
  width: 260px;
  height: 260px;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(120, 198, 255, .18);
  border-radius: 50%;
  box-shadow:
    0 0 0 16px rgba(121, 167, 255, .025),
    0 0 0 42px rgba(168, 91, 255, .02);
  animation: zynoxOrbitSpin 18s linear infinite;
  pointer-events: none;
}

/* -------------------------
   WORLD MINI CARDS
------------------------- */

.world-mini-card {
  position: relative;
  overflow: hidden;
}

.world-mini-card::before {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 4px;
  width: 76px;
  height: 76px;
  background:
    url("/assets/minecraft/items/ore_diamond.png")
    center / contain no-repeat;
  image-rendering: pixelated;
  opacity: .76;
  filter: drop-shadow(4px 5px 0 rgba(0,0,0,.55));
  transform: rotate(-9deg);
  pointer-events: none;
  z-index: 2;
}

.world-mini-enhanced::before {
  background:
    url("/assets/minecraft/items/ore_emerald.png")
    center / contain no-repeat;
  transform: rotate(8deg);
}

.world-mini-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(97, 207, 255, .65),
      rgba(171, 109, 255, .65),
      transparent
    );
  opacity: .75;
  pointer-events: none;
}

/* -------------------------
   FLOATING POWER OBJECTS
------------------------- */

.hero-floating-item {
  position: absolute;
  z-index: 4;
  image-rendering: pixelated;
  text-shadow:
    0 0 14px rgba(121, 190, 255, .65);
}

.item-diamond {
  color: #8cddff;
  filter: drop-shadow(0 0 14px rgba(93, 194, 255, .45));
  animation: zynoxFloatA 3.2s ease-in-out infinite;
}

.item-emerald {
  color: #78ed9c;
  filter: drop-shadow(0 0 14px rgba(77, 232, 132, .38));
  animation: zynoxFloatB 3.8s ease-in-out infinite;
}

.item-gold {
  color: #ffe082;
  filter: drop-shadow(0 0 14px rgba(255, 199, 79, .34));
  animation: zynoxFloatC 4.2s ease-in-out infinite;
}

/* -------------------------
   POWER PARTICLES
------------------------- */

.mc-hero .pixel-stars {
  z-index: 1;
}

.mc-hero .pixel-stars::before,
.mc-hero .pixel-stars::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  background:
    radial-gradient(circle, rgba(110, 211, 255, .6) 0 1px, transparent 2px);
  background-size: 24px 24px;
  opacity: .20;
  animation: zynoxParticleDrift 16s linear infinite;
}

.mc-hero .pixel-stars::after {
  background:
    radial-gradient(circle, rgba(182, 117, 255, .5) 0 1px, transparent 2px);
  background-size: 31px 31px;
  animation-duration: 22s;
  animation-direction: reverse;
}

/* -------------------------
   ANIMATIONS
------------------------- */

@keyframes zynoxCorePulse {
  0%, 100% {
    opacity: .65;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.04);
  }
}

@keyframes zynoxPowerPulse {
  0%, 100% {
    opacity: .72;
    transform: translate(-50%, -50%) scale(.88);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08);
  }
}

@keyframes zynoxOrbitSpin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes zynoxFloatA {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(8deg); }
}

@keyframes zynoxFloatB {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(10px) rotate(-7deg); }
}

@keyframes zynoxFloatC {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(-6deg); }
}

@keyframes zynoxParticleDrift {
  from {
    transform: translate3d(0,0,0) rotate(0deg);
  }
  to {
    transform: translate3d(70px,-35px,0) rotate(12deg);
  }
}

@media (max-width: 650px) {

  .mc-hero h1 {
    font-size: 36px;
    letter-spacing: -1.5px;
  }

  .mc-hero::after {
    width: 360px;
    height: 360px;
  }

  .mc-hero .zy-world-showcase::before,
  .mc-hero .zy-world-showcase::after {
    left: 78%;
    width: 130px;
    height: 130px;
  }

  .world-mini-card::before {
    width: 52px;
    height: 52px;
    right: 8px;
  }
}

.world-mini-art-image {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  box-sizing: border-box;
}

.world-mini-art-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}


.world-mini-card {
  will-change: transform, filter, border-color;
}

.world-mini-card:hover {
  transform: translateY(-6px) scale(1.015);
  filter: brightness(1.1);
}

.world-mini-art-image img {
  transition: transform .35s cubic-bezier(.2,.8,.2,1), filter .35s ease;
}

.world-mini-card:hover .world-mini-art-image img {
  transform: scale(1.08);
  filter: brightness(1.12) saturate(1.08);
}


.world-mini-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 55%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.10),
    transparent
  );
  transform: skewX(-18deg);
}

.world-mini-card:hover::after {
  animation: worldCardShine .7s ease forwards;
}

@keyframes worldCardShine {
  from {
    left: -120%;
  }
  to {
    left: 150%;
  }
}


.world-mini-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 55%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.10),
    transparent
  );
  transform: skewX(-18deg);
}

.world-mini-card:hover::after {
  animation: worldCardShine .7s ease forwards;
}

@keyframes worldCardShine {
  from {
    left: -120%;
  }
  to {
    left: 150%;
  }
}


.world-mini-card {
  animation: worldCardEnter .55s cubic-bezier(.2,.8,.2,1) both;
}

.world-mini-card:nth-child(2) {
  animation-delay: .12s;
}

@keyframes worldCardEnter {
  from {
    opacity: 0;
    transform: translateY(18px) scale(.97);
    filter: brightness(.75);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }
}


.hero-floating-item {
  will-change: transform;
}

.item-diamond {
  animation:
    floatItem 4s ease-in-out infinite,
    heroSpin 7s linear infinite;
}

.item-emerald {
  animation:
    floatItem 4.8s ease-in-out infinite reverse,
    heroSpin 9s linear infinite reverse;
}

.item-gold {
  animation:
    floatItem 3.6s ease-in-out infinite,
    heroSpin 6s linear infinite;
}

@keyframes heroSpin {
  from {
    rotate: -8deg;
  }
  to {
    rotate: 8deg;
  }
}


.mc-inventory-btn {
  will-change: transform, filter;
}

.mc-inventory-btn:active {
  transform: translateY(2px) scale(.97);
  filter: brightness(.95);
  box-shadow:
    inset 0 3px 0 rgba(0,0,0,.18),
    inset 0 -1px 0 rgba(255,255,255,.15),
    0 2px 0 rgba(0,0,0,.45);
}


.world-mini-card > b {
  display: inline-block;
  transition:
    transform .25s cubic-bezier(.2,.8,.2,1),
    filter .25s ease;
}

.world-mini-card:hover > b {
  transform: translateX(7px) scale(1.15);
  filter: brightness(1.35);
}

.world-mini-card:active > b {
  transform: translateX(3px) scale(.95);
}


.world-showcase-grid {
  position: relative;
  overflow: hidden;
}

.world-showcase-grid::before,
.world-showcase-grid::after {
  content: "";
  position: absolute;
  pointer-events: none;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  filter: blur(55px);
  opacity: .12;
  animation: worldGlowMove 8s ease-in-out infinite alternate;
}

.world-showcase-grid::before {
  top: -90px;
  left: -60px;
  background: #70e958;
}

.world-showcase-grid::after {
  right: -60px;
  bottom: -90px;
  background: #a66bff;
  animation-delay: -4s;
}

@keyframes worldGlowMove {
  from {
    transform: translate(0, 0) scale(.9);
  }
  to {
    transform: translate(55px, 25px) scale(1.15);
  }
}


.mc-section,
.minecraft-announcement,
.minecraft-feature-strip,
.minecraft-footer-cta {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity .7s ease,
    transform .7s cubic-bezier(.2,.8,.2,1);
}

.mc-section.zynox-revealed,
.minecraft-announcement.zynox-revealed,
.minecraft-feature-strip.zynox-revealed,
.minecraft-footer-cta.zynox-revealed {
  opacity: 1;
  transform: translateY(0);
}


.mc-server-card .server-art-character,
.mc-server-card .server-art-item,
.mc-server-card .server-art-particle {
  transition:
    transform .45s cubic-bezier(.2,.8,.2,1),
    filter .45s ease;
  will-change: transform, filter;
}

.mc-server-card:hover .server-art-character {
  transform: translateY(-5px) scale(1.025);
  filter: brightness(1.08) saturate(1.08);
}

.mc-server-card:hover .server-art-item {
  filter: brightness(1.15) drop-shadow(0 0 6px rgba(255,255,255,.16));
}

.mc-server-card:hover .server-art-particle {
  transform: translateY(-4px) scale(1.08);
  filter: brightness(1.2);
}


.mc-server-card .server-art {
  overflow: hidden;
}

.mc-server-card .server-art::after {
  content: "";
  position: absolute;
  inset: -40%;
  pointer-events: none;
  background:
    linear-gradient(
      120deg,
      transparent 42%,
      rgba(255,255,255,.045) 50%,
      transparent 58%
    );
  transform: translateX(-35%) rotate(8deg);
  opacity: 0;
}

.mc-server-card:hover .server-art::after {
  opacity: 1;
  animation: serverArtSweep 1.2s ease forwards;
}

@keyframes serverArtSweep {
  from {
    transform: translateX(-35%) rotate(8deg);
  }
  to {
    transform: translateX(35%) rotate(8deg);
  }
}


@media (min-width: 901px) {
  .world-mini-card {
    transform-style: preserve-3d;
    perspective: 900px;
  }

  .world-mini-card:hover {
    transform: translateY(-6px) scale(1.015) rotateX(1.2deg) rotateY(-1.2deg);
  }
}


.world-mini-card:active {
  transform: translateY(-2px) scale(.985);
  filter: brightness(.96);
}


.world-mini-art-image img {
  animation: worldThumbIdle 4s ease-in-out infinite;
  transform-origin: center;
}

.world-mini-card:hover .world-mini-art-image img {
  animation-play-state: paused;
}

@keyframes worldThumbIdle {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.025);
    filter: brightness(1.06);
  }
}


.mc-brand-block {
  animation: zynoxLogoPulse 3s ease-in-out infinite;
  will-change: transform, filter;
}

.mc-brand:hover .mc-brand-block {
  animation-play-state: paused;
  transform: translateY(-2px) rotate(-2deg) scale(1.05);
  filter: brightness(1.15);
}

.mc-brand-text {
  transition: text-shadow .25s ease, transform .25s ease;
}

.mc-brand:hover .mc-brand-text {
  transform: translateX(2px);
  text-shadow:
    3px 3px 0 #000,
    0 0 12px rgba(166,107,255,.35);
}

@keyframes zynoxLogoPulse {
  0%, 100% {
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }
  50% {
    transform: translateY(-1px) scale(1.025);
    filter: brightness(1.08);
  }
}


.mc-inventory-btn {
  position: relative;
  overflow: hidden;
}

.mc-inventory-btn::after {
  content: "";
  position: absolute;
  top: -20%;
  left: -130%;
  width: 45%;
  height: 140%;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.28),
    transparent
  );
  transform: skewX(-18deg);
}

.mc-inventory-btn:hover::after {
  animation: buttonShine .65s ease forwards;
}

@keyframes buttonShine {
  from {
    left: -130%;
  }
  to {
    left: 150%;
  }
}


.pixel-stars {
  animation: pixelStarsDrift 18s linear infinite;
  will-change: background-position;
}

@keyframes pixelStarsDrift {
  from {
    background-position:
      10px 20px,
      55px 70px;
  }
  to {
    background-position:
      50px 60px,
      5px 25px;
  }
}


.minecraft-section-title h2 {
  animation: sectionTitleGlow 3.5s ease-in-out infinite;
}

@keyframes sectionTitleGlow {
  0%, 100% {
    text-shadow:
      4px 4px 0 #111,
      0 0 0 rgba(255,255,255,0);
  }

  50% {
    text-shadow:
      4px 4px 0 #111,
      0 0 14px rgba(166,107,255,.22);
  }
}


/* =========================================================
   FINAL DECORATION + CREATIONS MOBILE FIX
========================================================= */

/* Replace the confusing parrot decoration with a clean
   Minecraft-style pixel flower. */
.minecraft-category-card::after,
.rank-card::after,
.creation-vault::after {
  background-image: url("/assets/decor/minecraft-flower-pixel.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  image-rendering: pixelated;
}

.minecraft-category-card::after {
  right: 12px;
  bottom: 8px;
  width: 46px;
  height: 58px;
  transform: rotate(0deg);
}

.rank-card::after {
  right: 12px;
  bottom: 8px;
  width: 46px;
  height: 58px;
  transform: rotate(0deg);
}

.rank-card.featured::after {
  transform: rotate(-4deg) scale(1.02);
}

.creation-vault::after {
  right: 18px;
  top: 14px;
  width: 52px;
  height: 66px;
  transform: rotate(0deg);
}

/* Clean mobile stacking for Zynox Creations */
@media (max-width: 900px) {
  .creation-vault {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 18px;
  }

  .creation-vault-art {
    min-height: 220px;
  }

  .creation-vault-copy {
    width: 100%;
    text-align: center;
  }

  .creation-vault-copy h3 {
    max-width: 100%;
    font-size: 13px;
    line-height: 1.65;
  }

  .creation-vault-copy p {
    max-width: 100%;
    font-size: 11px;
    line-height: 1.7;
  }

  .creation-slots {
    justify-content: center;
  }

  .creation-vault-copy .coming-soon {
    display: inline-block;
    margin-top: 4px;
  }
}

@media (max-width: 650px) {
  .creation-vault {
    margin-top: 24px;
    padding: 12px;
    gap: 12px;
  }

  .creation-vault-art {
    min-height: 195px;
  }

  .creation-character {
    width: 125px;
    height: 125px;
  }

  .creation-diamond {
    width: 36px;
    height: 36px;
    right: 20px;
    bottom: 18px;
  }

  .creation-vault-copy {
    padding: 8px 6px 12px;
  }

  .creation-vault-copy h3 {
    margin-top: 12px;
    font-size: 10px;
    line-height: 1.7;
  }

  .creation-vault-copy p {
    margin-top: 10px;
    font-size: 9px;
    line-height: 1.7;
  }

  .creation-slots {
    gap: 6px;
    margin-top: 14px;
  }

  .creation-slots span {
    padding: 7px 8px;
    font-size: 5px;
  }

  .creation-vault::after {
    right: 8px;
    top: 8px;
    width: 38px;
    height: 48px;
  }
}

/* FINAL: Minecraft flower decorations for cosmetic cards */
.minecraft-category-card:nth-child(1)::after,
.minecraft-category-card:nth-child(2)::after,
.minecraft-category-card:nth-child(3)::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 8px;
  width: 58px;
  height: 70px;
  background: url("/assets/decor/minecraft-flower-pixel.svg") center / contain no-repeat;
  image-rendering: pixelated;
  z-index: 4;
  pointer-events: none;
  filter: drop-shadow(3px 5px 0 rgba(0,0,0,.42));
  transform: none;
}

@media (max-width: 650px) {
  .minecraft-category-card:nth-child(1)::after,
  .minecraft-category-card:nth-child(2)::after,
  .minecraft-category-card:nth-child(3)::after {
    width: 46px;
    height: 58px;
    right: 8px;
    bottom: 6px;
  }
}

/* Random Minecraft flower set for cosmetic cards */
.minecraft-category-card:nth-child(1)::after {
  background-image: url("/assets/decor/flower-poppy.svg");
}

.minecraft-category-card:nth-child(2)::after {
  background-image: url("/assets/decor/flower-dandelion.svg");
}

.minecraft-category-card:nth-child(3)::after {
  background-image: url("/assets/decor/flower-blue.svg");
}

/* Center the visible player inside the creation portal */
.creation-vault-art .creation-character {
  left: 50%;
  top: 50%;
  bottom: auto;
  transform: translate(-58%, -50%);
}

@media (max-width: 650px) {
  .creation-vault-art .creation-character {
    transform: translate(-58%, -50%);
  }
}

/* FINAL CENTER FIX: keep the player centered inside the portal */
.creation-vault-art .creation-character {
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  width: 150px;
  height: 150px;
  transform: translate(-65%, -50%);
}

@media (max-width: 650px) {
  .creation-vault-art .creation-character {
    width: 125px;
    height: 125px;
    transform: translate(-65%, -50%);
  }
}

/* Dynamic random decorations */
.minecraft-category-card::after,
.rank-card::after,
.creation-vault::after {
  background-image: var(--zynox-random-decor) !important;
}

/* Creations: use one random decoration instead of the old fixed diamond */
.creation-vault-art .creation-diamond {
  display: none;
}

/* =========================================================
   SERVER DETAIL PAGE: keep rendered sections visible
   The homepage reveal observer is not loaded on server.html.
========================================================= */

body.server-page .mc-section,
body.server-page .minecraft-footer-cta {
  opacity: 1;
  transform: none;
}

.rank-icon img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  display: block;
  image-rendering: auto;
}