.logo {
  text-align: center;
  margin-top: -2vw;
  margin-bottom: 4vw;
  position: relative;
  z-index: 1;
}

.logo img {
  width: 85vw;
  max-width: 520px;
  height: auto;
  margin: 0 auto;
}

.menu {
  display: flex;
  flex-direction: column;
  gap: 3vw;
  padding-bottom: 22vw;
  position: relative;
  z-index: 1;
}

.game-card {
  height: 25vw;
  border-radius: 4.2vw;
  padding: 3vw 4vw;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  border: 0.45vw solid currentColor;
  box-shadow:
    0 0 3.5vw currentColor,
    inset 0 0 5vw rgba(255, 255, 255, 0.08);
}

.game-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 50%, rgba(255, 255, 255, 0.18), transparent 23%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.08));
  pointer-events: none;
}

.game-card::after {
  content: "";
  position: absolute;
  right: 10vw;
  top: 50%;
  width: 20vw;
  height: 20vw;
  transform: translateY(-50%) rotate(16deg);
  border: 0.7vw solid currentColor;
  border-radius: 2vw;
  opacity: 0.16;
}

.game-card .icon {
  width: 20vw;
  height: 20vw;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11vw;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.55));
  box-shadow:
    inset 0 0 4vw rgba(255, 255, 255, 0.12),
    0 0 2vw currentColor;
  margin-right: 5vw;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

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

.content h2 {
  font-size: 8vw;
  line-height: 0.88;
  font-weight: 900;
  letter-spacing: 0.15vw;
  margin: 0;
  color: white;
  text-shadow:
    0 0.8vw 0.4vw rgba(0, 0, 0, 0.9),
    0 0 2vw currentColor;
}

.content p {
  font-size: 4vw;
  font-weight: 900;
  margin: 1.5vw 0 0;
}

.arrow {
  margin-left: auto;
  font-size: 9vw;
  font-weight: 300;
  color: white;
  text-shadow: 0 0 2vw currentColor;
  position: relative;
  z-index: 2;
}

/* =========================
   Game Card Colors
   ========================= */
.blue {
  color: #00bfff;
  background: linear-gradient(110deg, #061b55 0%, #073d8d 55%, #062541 100%);
}

.blue p {
  color: #00d9ff;
}

.gold {
  color: #ffb800;
  background: linear-gradient(110deg, #2b1800 0%, #7a4700 55%, #2c1900 100%);
}

.gold p {
  color: #ffe000;
}

.green {
  color: #00ff55;
  background: linear-gradient(110deg, #001f0a 0%, #00651f 55%, #001d09 100%);
}

.green p {
  color: #45ff7a;
}

.purple {
  color: #d829ff;
  background: linear-gradient(110deg, #250030 0%, #78008f 55%, #26002f 100%);
}

.purple p {
  color: #ff5cff;
}

.red {
  color: #ff174d;
  background: linear-gradient(110deg, #3a000a 0%, #980018 55%, #350009 100%);
}

.red p {
  color: #ff6666;
}